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!
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;
}
}
<input type="number"it may work.