动态添加 $watch

Question

我有一个 JSON 数据集，其中每一行都包含一个输入值、一小块用于计算的 JavaScript 代码和一个小计值，该小计值是 eval() 执行计算后输入值的结果。数据集将包含一行或多行。每个输入都将以 HTML 格式重复到页面上，并且小计的总和将作为总值以及每个单独的小计值显示给用户。

我尝试使用 $watch 并为转发器中的每一行添加一个，但当用户更改输入值时，我似乎无法让它们触发。

我创建了我的第一个Sample_Plunker 来展示我想要实现的目标，但没有成功。

不确定我是否也应该在此处发布代码，但我们将不胜感激。

基本上是我的 HTML：

<div ng-controller="MainCtrl as MainCtrl" ng-init="MainCtrl.init()">
    <div ng-repeat="rule in MainCtrl.myCode">

        Input_{{$index}}: <input ng-model="rule.inpValue" type="number" />
        <!-- the following needs to reflect the result after eval() of myCode[?].code from JSON below -->
        Subtotal: {{rule.nSubTotal}}
        <br />
    </div>
    <br />

    <!-- the following should be a sum of all values above -->
    Total: {{MainCtrl.nTotal}}

</div>

这是我的示例数据和没有响应的 $watch：

app.controller('MainCtrl', function($scope) {
    var _this = this;
    _this.nTotal = 0;
    // sample js code tht will be execuited later
    _this.myCode = [{
        "code": "_this.myCode.inpValue +2",
        "inpValue": 0,
        "nSubTotal": 0
    }, {
        "code": "_this.myCode.inpValue*3",
        "inpValue": 0,
        "nSubTotal": 0
    }, {
        "code": "_this.myCode.inpValue/5",
        "inpValue": 0,
        "nSubTotal": 0
    }];

    this.init = function() {
        $scope.$watch('MainCtrl.myCode[i].inpValue', function() {
            // debugger;

            // assuming if watch would fire, subtotal = eval( input ) 
            _this.nSubTotal = eval(_this.myCode[i].code);

            // I would also keep a running total at this point
            _this.nTotal = _this.nTotal + _this.myCode[i].nSubTotal;
        });
    }; //end init()
});

Answer 1

您的代码有很多错误，但基本上要回答您的问题，您可以通过循环遍历数组并为每个元素调用一次 $scope.$watch 来对数组中的每个项目应用监视。

我还强烈建议您使用实际函数而不是 eval() 来评估表达式。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  var _this = this;
  _this.nTotal = 0;

  // sample js code tht will be execuited later
  _this.myCode = [{
    "code": function() { return this.inpValue + 2; },
    "inpValue": 0,
    "nSubTotal": 0
  }, {
    "code": function() { return this.inpValue * 3; },
    "inpValue": 0,
    "nSubTotal": 0
  }, {
    "code": function() { return this.inpValue / 5; },
    "inpValue": 0,
    "nSubTotal": 0
  }];

  function sum (values) {
      return values.reduce(function (a, b) { return a + b; }, 0);
  }

  this.init = function() {

    _this.myCode.forEach(function(code) {
      $scope.$watch(function() {
        return code.inpValue;
      }, function() {
        code.nSubTotal = code.code();
        _this.nTotal = sum(_this.myCode.map(function(c) { return c.nSubTotal; }));
      });
    });

  };

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7" data-require="angular.js@1.4.x"></script>
<div ng-app="plunker" ng-controller="MainCtrl as MainCtrl" ng-init="MainCtrl.init()">
  <div ng-repeat="rule in MainCtrl.myCode">

    Input_{{$index}}:
    <input ng-model="rule.inpValue" type="number" />

    Subtotal: {{rule.nSubTotal}}
    <br />

  </div>
  <br />

  <!-- the following should be a sum of all values above -->
  Total: {{MainCtrl.nTotal}}

  <br />
  <br />

</div>

Answer 2

您的$watch 没有触发，因为您正在观看一个表达式，该表达式将始终针对$scope 评估为undefined。在查看一组项目以进行更改时，您有几种选择：

1. 每个项目都有一个单独的$watch。效率不高，尤其是在数组很大的情况下。
2. 一个$watchGroup，它接受一个监视表达式数组。当表达式不统一时很有用，例如不同对象的不同属性。
3. $watchCollection，它浅层监视单个对象。我认为这最适合您的情况。

另外，请注意$watch* 的第一个参数可以是一个函数，它会返回一个您想要查看的值。把这些放在一起，你的观察者看起来像

$scope.$watchCollection(function() {
  var aInputs = [];
  for (var i = 0, len = myCode.length; i < len; ++i) {
    aInputs.push(myCode[i].inpValue);
  }
  return aInputs;
}, function() {
  // one of the inpValues in myCode has changed
  // need to re-compute nTotal
});

另外，我强烈建议您不要使用eval()，并遵循 JLRishe 的使用函数的建议。如果您绝对需要评估字符串表达式，您可以使用 Angular 的$scope.$eval 安全地执行此操作。这将针对范围和一组局部变量评估表达式。例如，

$scope.$eval("inpValue + 2", { inpValue: 3 }) === 5;

这是一个有效的Plunker。它使用$eval 作为概念证明，但同样，如果可以，请使用普通函数。