Question

我是Angular的新手，在第一次申请时遇到了一些困难。

我有从数据库中检索到的对象数组：$scope.result 通过ng-repeat点击每个ng-click元素，我将该元素推送到$scope.selectedTags数组，并在视图上使用另一个ng-repeat。第二个ng-repeat有两个输入字段。我希望$watch对$scope.selectedTags的每个元素进行更改，并且如果有更改，则使用输入值进行一些计算。我在数组中的每个元素上使用angular.forEach到$watch但如果数组中有多个元素，则它无法正常工作。

HTML：

<div ng-app="application" ng-controller="controller">
    <ul>
        <li ng-repeat="r in result" ng-click="addToSelectedTags($index)"><a href="#">{{r.name}}</a></li>
    </ul>
    <ul>
        <li ng-repeat="t in selectedTags">{{t.name}}<input type="text" ng-model="t.n1" /> <input type="text" ng-model="t.n2" /></li>
    </ul>
</div>

Javascript代码：

  <script>
  var app = angular.module("application", []);
    app.controller("controller", function($scope){

    $scope.result = [
        {name: "first", n1: 2, n2: 6},
        {name: "second", n1: 7, n2: 1},
        {name: "third", n1: 4, n2: 9},
        {name: "fourth", n1: 5, n2: 2}

    ];
    $scope.selectedTags = [];

    $scope.addToSelectedTags = function(index) {
        var selectedtag = $scope.result[index];
        $scope.selectedTags.push(selectedtag);

      angular.forEach($scope.selectedTags, function(value, key) {
          $scope.$watchGroup(['selectedTags['+key+'].n1', 'selectedTags['+key+'].n2'], function(newval, oldval){
               if(newval[1] !== oldval[1]) {
                    $scope.selectedTags[key].n1 = newval[1]/oldval[1]*$scope.selectedTags[key].n1;
                    oldval[1] = newval[1];
               }
          });

       });
    };
});

    </script>

如果$scope.selectedTags中有两个元素并更改第一个元素的值，则$watch运行两次并进行错误的计算。如果$scope.selectedTags中有三个元素，它会运行三次，依此类推。我试图将整个angular.forEach放在addToSelectedTags()函数之外，但这样做根本不会$watch进行更改。你能告诉我怎么处理这个问题吗？

Plunker

Answer 1

好吧，我得到了一些工作：your updated plunkr

基本上导致你的bug行为的原因是你每次将一个新元素推送到selectedTags时都创建了一个新的手表。通过在元素上放置多个手表，它会为当前正在观看它的每个手表调用您的功能。每个元素只需要一个手表，所以我用对象上的单个手表替换了组手表：

$scope.addToSelectedTags = function(index) {
        var selectedtag = $scope.result[index];
        $scope.selectedTags.push(selectedtag);

        $scope.$watchCollection('selectedTags[' + ($scope.selectedTags.length - 1)+ ']', function(newval, oldval){
                    //Not sure about the calculation you want, just change it to whatever behaviour you need
                    newval.n1 = newval.n2/oldval.n2*newval.n1
          });
    };

我不确定您想要的操作，但您可能需要在我的评论下进行更改。祝你好运！

$监视通过ng-click

1 个答案: