強制ng-repeat重新運行數據綁定中的函數

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

嗯，我覺得很傻。我認爲我可以把問題歸結爲在Angular上成爲新手，但錯誤在於簡單的舊JavaScript。

itemPrice函數的第一行將$scope.orderType與整數進行比較。但$scope.orderType在功能（$scope.orderType = $scope.orderTypes[0]）中設置爲字符串。

現在比較固定了，ng-repeat按預期更新，每當更改$scope.orderType時，都會調用itemPrice。

Answer 2

我的工作，我真的沒有時間做plunker來驗證這一點：

我建議不使用一個函數（「itemPrice」）。事先計算好這個值，然後將這個值放入項目結構中的一個變量中。

當其他類型更改（使用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(); 
    }); 
    // ... 

}]);