модель обновления angularjs на основе суммы других полей

Question

Я хочу иметь возможность обновить значение в моей модели данных на основе результата двух других полей. с использованием

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

У меня нет проблем при вычислении результата, но как я могу связать его с толом?

например, я попытался

<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 для очистки вашего кода, и вы можете подвергать функции в своей области для такого использования.