Question

我希望能够根据其他两个字段的结果更新数据模型中的值。使用

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

我计算结果没问题，但我怎么能把它绑定到toal？

例如我试过

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

但该模型会覆盖此处的值吗？

参见完整示例

＆＃13;

    '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"}
        ];
        }]);

＆＃13;

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

＆＃13;

如何实现这一目标？

Answer 1

有许多方法可以实现此目的。这是一个简单的循环，只要列表发生变化，就会更新total属性：

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

Answer 2

你可以对＆＃34; rate＆＃34;的任何变化进行计算。或者＆＃34;小时＆＃34;。

        $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 3

我可能会在您的代码段中替换它：

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

使用：

{{ total(s) }}

然后在你的控制器内：

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

请记住，您可能始终在AngularJS表达式中嵌入函数调用来清理代码，并且可能会在您的作用域上公开函数以供此类使用。

angularjs基于其他字段的总和更新模型

3 个答案: