I am currently utilizing the ng-repeat directive within a table to display a list of items along with their respective prices.
- The price is dynamically linked to
itemPrice(item), which has been defined in my controller. - This function calculates the price based on the value of
$scope.orderType. orderTypeis connected to a dropdown menu (select) in the HTML markup.
Is there an optimal method to ensure that all prices are updated whenever the order type is changed?
HTML
<select ng-model="orderType" ng-options="name for name in orderTypes"></select>
<!-- ... -->
<tr ng-repeat="item in items">
<td>{{ item.name }}</td>
<td><input type="checkbox" ng-model="item.is_used"></td>
<td><input type="number" ng-model="item.quantity" min="0" max="100"></td>
<td>{{ itemPrice(item) | currency:"$" }}</td>
<td>{{ itemPrice(item) * item.quantity | currency:"$" }}</td>
</tr>
JavaScript
.controller('OrderCtrl', ['$scope', '$http', function($scope, $http) {
// Define different order types
$scope.orderTypes = ['Buy Back', 'Sale'];
$scope.orderType = $scope.orderTypes[1];
// ...
// Retrieve the price of an item
$scope.itemPrice = function(item) {
if ($scope.orderType === 0) {
return item.price_buy_back;
} else if (item.is_used) {
return item.price_used;
} else {
return item.price_new;
}
}
// ...
}]);