1

我有一个 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()
});
4

2 回答 2

4

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

于 2015-10-23T21:13:46.793 回答
1

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

  1. $watch每个项目一个单独的。效率不高，尤其是在数组很大的情况下。
  2. A $watchGroup，它接受一组监视表达式。当表达式不统一时很有用，例如不同对象的不同属性。
  3. A $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用作概念证明，但同样，如果可以，请使用普通函数。

于 2015-10-23T21:34:16.910 回答