Question

我试图通过乘以2 ng模型计算总数。模型在ng-repeat中，我有一个自己的行控制器。

在重新加载时，它会执行控制台日志，但是当我更新ng-models时，他们不再需要控制日志，而且无法正常工作。

控制器：

app.controller('RowCtrl', function ($scope) {
   $scope.unit_price = 0;
   $scope.quantity = 0;

   $scope.$watchCollection('[unit_price, quantity]', function(newValues) {
      console.log(parseInt(newValues));
   }, true);

   $scope.total = $scope.unit_price * $scope.quantity;
});

用小提琴更新：http://jsfiddle.net/r9Gmn/

Answer 1

观看计算总数的函数：

$scope.$watch(function() { 
  return unit_price * quantity;
}, function(newVal) {
  $scope.total = newVal;
});

Answer 2

我同意@pixelbits的答案。

从角度1.3开始添加一个新的范围方法$watchGroup：

示例http://plnkr.co/edit/2DvSmxUo5l8jAfBrSylU?p=preview

解决方案：

$scope.$watchGroup(['unit_price', 'quantity'], function(val) {
  $scope.total = val[0] * val[1];
});

Answer 3

这应该可以正常工作（如果正确实施），即你的逻辑是正确的：

<div ng-controller="myCtrl">
    Unit price:
    <input type="number" ng-model="unit_price" />
    <br />
    Quantity:
    <input type="number" ng-model="quantity" />
    <hr />
    Total: {{total}}
</div>

app.controller('myCtrl', function ($scope) {
    $scope.unit_price = 0;
    $scope.quantity   = 0;

    $scope.$watchCollection('[unit_price, quantity]', function(newValues) {
        $scope.total = $scope.unit_price * $scope.quantity;
    });
});

另请参阅此 short demo 。

Answer 4

这是你的小提琴：http://jsfiddle.net/mikeeconroy/r9Gmn/1/

在控制器上的$scope.rows数组中，您从未定义要在RowCtrl's范围内使用的属性。此外，您应确保将track by与ng-repeat一起使用，这样您就不会出现欺骗错误。

var app = angular.module('myApp', []);
app.controller('RowCtrl', function ($scope) {
    $scope.total = 0;
    $scope.$watchCollection('[row.unit_price, row.quantity]', function(newValues)         {
        $scope.total = parseInt(newValues[0]) * parseInt(newValues[1]);
    });
});

app.controller('MainCtrl', function ($scope) {
    $scope.rows = [
        { unit_price: 10, quantity: 0 },
        { unit_price: 12, quantity: 0 },
        { unit_price: 15, quantity: 0 },
    ];
});

$ watch不在ng-repeat中更新

4 个答案:

解决方案：