Angularjs $watch查看通过单击更新的对象数组中的值更改

我是个新手，第一次申请时遇到了一些困难

我已从数据库中检索到对象数组：

$scope.result

通过点击每个

ng repeat

元素，点击

ng click

，我将该元素推到

$scope。选择标记

数组，并在视图上使用另一个

ng repeat

。第二个

ng repeat

有两个输入字段。我想查看

$scope的每个元素的变化。选择标记，如果有变化，则使用输入值进行一些计算。我在数组中的每个元素上使用
angular.forEach
到
$watch
，但如果数组中有多个元素，则它无法正常工作


HTML:






{{t.name}



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>


var app=angular.module（“应用程序”，[]）；
应用控制器（“控制器”，功能（$scope）{
$scope.result=[
{名称：“第一”，n1:2，n2:6}，
{名称：“第二”，n1:7，n2:1}，
{名称：“第三”，n1:4，n2:9}，
{名称：“第四”，n1:5，n2:2}
];
$scope.selectedTags=[]；
$scope.addToSelectedTags=函数（索引）{
var selectedtag=$scope.result[index]；
$scope.selectedTags.push（selectedtag）；
角度.forEach（$scope.selectedTags，函数（值，键）{
$scope.$watchGroup（['selectedTags['+key+'].n1'，'selectedTags['+key+'].n2']，函数（newval，oldval）{
if（newval[1]！==oldval[1]）{
$scope.selectedTags[key].n1=newval[1]/oldval[1]*$scope.selectedTags[key].n1；
oldval[1]=newval[1]；
}
});
});
};
});


如果
$scope.selectedTags
中有两个元素，并更改第一个元素的值，则
$watch
将运行两次并进行错误的计算。如果
$scope.selectedTags
中有三个元素，它将运行三次，以此类推。
我试图将整个
angular.forEach
放在
addToSelectedTags（）
函数之外，但这样一来，它根本就无法
$watch
查看更改。你能告诉我如何处理这个问题吗

好了，我有些东西在工作：

基本上，导致您出现错误行为的原因是，每次将新元素推送到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
          });
    };

我不确定您想要的操作，尽管您可能不得不在我的评论下更改它。祝你好运
 好了，我有些东西在工作：

基本上，导致您出现错误行为的原因是，每次将新元素推送到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
          });
    };

我不确定您想要的操作，尽管您可能不得不在我的评论下更改它。祝你好运
 为什么要显式应用watch？我能知道你的目的吗goal@SiddharthPandey我尝试了ng change，但我想用oldValue和newValue进行计算。这就是为什么我使用$watch。这正是我想要计算的：$scope.selectedTags[key].n1=newval[1]/oldval[1]*$scope.selectedTags[key].n1；你试过只观察数组而不是数组中的每个元素吗？@Zonedark如果我只观察数组，我如何在每次更改时使用n1和n2进行计算？你可以制作一个diff函数来比较旧数组和新数组，并提取更改的元素。。虽然这可能奏效，但有点过分了。我来看看我能不能想出更好的办法为什么要明确地申请手表？我能知道你的目的吗goal@SiddharthPandey我尝试了ng change，但我想用oldValue和newValue进行计算。这就是为什么我使用$watch。这正是我想要计算的：$scope.selectedTags[key].n1=newval[1]/oldval[1]*$scope.selectedTags[key].n1；你试过只观察数组而不是数组中的每个元素吗？@Zonedark如果我只观察数组，我如何在每次更改时使用n1和n2进行计算？你可以制作一个diff函数来比较旧数组和新数组，并提取更改的元素。。虽然这可能奏效，但有点过分了。我来看看能不能想出更好的主意谢谢。我想这就是我需要的。我会试试看它是否能与我的代码一起工作，然后我会发布反馈。当然，如果你需要任何东西，请不要犹豫。因为“索引”的原因，这个解决方案不起作用。在$watch中，“index”是“result”数组的索引，而不是更新的“selectedTags”数组的“index”。如果我随机点击'result'数组，$watch不能正常工作。我更新了plunkr链接来修复它。我将索引替换为所选标记的长度（减去1，以匹配最后一个元素）。告诉我我是否理解正确您好，Zonedark，很抱歉回答晚了。这确实非常有效，但当我尝试创建一个从selectedTag数组中删除元素的函数时，其他数组元素的值会发生变化。控制台中的错误是“TypeError:无法读取未定义的属性'n2'”我正在使用拼接方法删除元素。以下是更新的PRUNKR:。你对那个问题有什么解决办法吗？提前谢谢，非常感谢。我想这就是我需要的。我会试试的