基於其他字段之和的angularjs更新模型

Question

我希望能夠根據其他兩個字段的結果更新我的數據模型中的值。使用

<td><input ng-value="s.hours*s.rate"></td> 

我沒有問題的計算結果，但我怎麼能夠綁定它toal？

如我試圖

<td><input ng-model="s.total" ng-value="s.hours*s.rate"></td> 

但該模型在這裏覆蓋了價值？

查看完整的例子

'use strict'; 
 
    var app = angular.module('app', []); 
 
     app.controller('MainCtrl', ['$scope', function ($scope) { 
 
      $scope.staff = [ 
 
      {"id": "1","name": "Alex","rate": "10", "hours": "10","total":"0"}, 
 
      {"id": "2","name": "Brad","rate": "20", "hours": "10","total":"0"}, 
 
      {"id": "3","name": "Cam","rate": "15", "hours": "10","total":"0"} 
 
     ]; 
 
     }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <div ng-app="app"> 
 
      <div ng-controller="MainCtrl"> 
 
       <table> 
 
       <tr><td>name</td><td>rates</td><td>hours</td><td>total</td><td>total</td></tr> 
 
       <tr ng-repeat="s in staff"> 
 
        <td>{{s.name}}</td> 
 
        <td><input ng-model="s.rate"></td> 
 
        <td><input ng-model="s.hours"></td> 
 
        <td><input ng-value="s.hours*s.rate"></td> 
 
        <td><input ng-model="s.total"></td> 
 
       </tr> 
 
       </table> 
 
     </div> 
 
    </div>

怎麼可以這樣來達到的？

Answer 1

你可能只是開槍「率」或「小時」中的任何改變計算。

 $scope.calc= function(s) { 
      s.total=s.hours*s.rate; 
     } 
     angular.forEach($scope.staff, function(s) { $scope.calc(s)}); 

我已經提出了一個撥弄代碼和HTML修改：

http://jsfiddle.net/macl/sx3zouuv/

希望它能幫助。

Answer 2

有很多方法來完成此操作。下面是一個簡單的循環，更新total財產每當列表更改：

$scope.$watch('staff'. function(newVal, oldVal) { 
    angular.forEach(newVal, function(s) { 
    s.total = s.rate * s.hours; 
    }); 
}); 

Answer 3

我可能會在你的代碼段替換此：

<input ng-model="s.total">

有：

{{ total(s) }}

那麼你的控制器中：

$scope.total = function (staffmember) { return staffmember.rate * staffmember.hours; }

請記住，您可能總是在AngularJS表達式中嵌入函數調用來清理您的代碼，並且可能會在您的作用域中公開函數以供此類使用。