CODEWITHSUNDEEP
angularjs
The Whiz of Oz
The Whiz of Oz

Reputation: 7043

How do I pass numerical value to a function via input field in Angular?

I would like to make a list of products with their prices and quantity fields next to them, and I would like the user to be able to pass a number into the quantity input field, and see the adjusted price, so I came up with something like this:

    <li ng-repeat="product in products">
      {{product.price}} - quantity: <input type="text" value="1" ng-model="prodQuantity"> - {{priceTotalProducts(prodQuantity)}}
    </li>

Which surely doesn't work. Please point me into the right direction!

Upvotes: 0

Views: 67

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67336

Here is a plunker demonstrating a possible solution.

I changed the markup a bit so that the function calculating the total takes the whole product and the input is bound to the quantity property of the product:

<body ng-controller="Ctrl">
    <ul>
        <li ng-repeat="product in products">
            {{product.price}} - quantity: <input type="text" value="1" ng-model="product.quantity" />
         - {{priceTotalProducts(product)}}
        </li>
    </ul>
</body>

And here is the controller:

function Ctrl($scope) {

 $scope.products = [
    { name: "prod1", price: 1.55, quantity: 0 },
    { name: "prod2", price: 2.55, quantity: 0 },
    { name: "prod3", price: 3.55, quantity: 0 },
   ]; 

  $scope.priceTotalProducts = function(product) {

    return product.price * product.quantity;
  }
}

Upvotes: 1

Related Questions