How to get text inside html element using angularjs?

Question

As the title said, how do I get the text inside a div using angularjs ? IE:

<div class='container' ng-app=''>
    <input type='text' ng-model='qty'>
    <div class='price'></div>
    <div class='total'>{{qty * price}}</div>
</div>

The input is editable and can be filled with any numbers, while the price is fixed, not editable but it is different for every items, now how do I get the content of the price using AngularJS and multiply it with the qty inputted and show the total in the total div?

So basically, this should include looping right? Do you have ng-repeat implemented here? — Guruprasad J Rao
– Guruprasad J Rao, Commented Jan 16, 2017 at 10:30
Why do you want to get the value from DOM? The value is coming from angular model. right? To do binding you can use ng-bind, but the as value is already present in scope then why take from DOM. Well there is no better way or angular way. — amarmishra
– amarmishra, Commented Jan 16, 2017 at 10:34
@amarmishra actually I use normal jquery to change the value of the price after the user selected the item, but since I just found out about angular I thought it could be useful rather than writing another script for this. — Charas
– Charas, Commented Jan 16, 2017 at 14:10
@Mistalis I am using jquery ajax to manipulate the price after a user selected a certain item. — Charas
– Charas, Commented Jan 16, 2017 at 14:17

Mihai Alexandru-Ionut · Accepted Answer · 2017-01-16 14:17:18Z

3

You need to initialize values in controller.

function MyCtrl($scope) {
   $scope.price= $('.price').text();
   $scope.qty=0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="MyCtrl">
    <input type="text" ng-model='qty'>
    <div class="price">3.4</div>
    <div class='total'>Total: {{ qty * price }}</div>
  </div>
</div>

edited Jan 16, 2017 at 14:17

answered Jan 16, 2017 at 10:32

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Charas Over a year ago

Thank you for your answer, but the price is not going to be static as the example you gave, the price is going to keep changing using jquery ajax depending on the item selected by the user.

Mihai Alexandru-Ionut Over a year ago

Please have a look now.

Collectives™ on Stack Overflow

How to get text inside html element using angularjs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related