HTML

Question

我在表格中使用ng-repeat来显示商品及其价格列表。

价格绑定在我的控制器中定义的itemPrice(item)。
该功能根据$scope.orderType计算价格。
orderType绑定到HTML中的select。

订单类型更改时强制所有价格更新的最佳方法是什么？

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) {

    // Set up order types
    $scope.orderTypes = ['Buy Back', 'Sale'];
    $scope.orderType = $scope.orderTypes[1];

    // ...

    // Get 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;
        }
    }

    // ...

}]);

Answer 1

我工作，而且我没有时间做一名侦探来验证这一点：

我建议不要使用函数（＆＃34; itemPrice＆＃34;）。事先计算好这个值，并将值放在项目结构中的变量中。

当其他类型更改时（使用ng-change或$ scope。$ watch ..），然后重新计算并更新项目结构中的变量。

类似的东西：

.controller('OrderCtrl', ['$scope', '$http', function($scope, $http) {

    // Set up order types
    $scope.orderTypes = ['Buy Back', 'Sale'];
    $scope.orderType = $scope.orderTypes[1];

    var 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;
        }
    }

    var setItemPrices = function(){

        for(var i = 0; i < $scope.items.length; i++)
        {
            $scope.items[i].itemPrice = itemPrice($scope.items[i]);
        }
    }

    $scope.$watch("orderType", function(newVal, oldVal){
           //update itemPrices
           .... setItemPrices();
    });
    // ...

}]);

Answer 2

嗯，我觉得很傻。我以为我可以把这个问题想成为Angular的新手，但错误在于普通的旧JavaScript。

itemPrice函数的第一行将$scope.orderType与整数进行比较。但是$scope.orderType在函数（$scope.orderType = $scope.orderTypes[0]）的前面设置为 string 。

现在比较已修复，ng-repeat按预期更新，每当itemPrice更改时都会调用$scope.orderType。

强制ng-repeat重新运行数据绑定功能

HTML

的JavaScript

2 个答案: