监视一个 ng-model 并将更改应用到 ng-repeat 中的另一个 ng-model答案

【问题标题】：Watching over one ng-model and applying the changes to another ng-model in ng-repeat监视一个 ng-model 并将更改应用到 ng-repeat 中的另一个 ng-model
【发布时间】：2017-04-27 13:56:14
【问题描述】：

我有以下工作案例 -

在 html 中，我使用 ng-repeat 从 API 响应中填充表数据。表中有两个不同的列都有不同的ng-models。一列将包含从响应中获取的数据，而另一列在表加载时为空白。

我正在寻找的是当用户在第二列中输入一些值并保存数据时，数据应该会反映在第一列中。

我在循环中使用了$watch，但显然在循环的最后一次迭代中获得的值被存储并反映在第一列中。我还研究了 watchGroup 但这对 Angular 1.3 及更高版本有效，而我使用的版本是 1.1

HTML -

<div ng-repeat="data in response">
  <table>
    <tr ng-repeat="dt in data track by $index">
      <td>
         <input id="oldValue_{{$index}}" ng-model="dt.oldValue[$index]" />
      </td>
      <td>
        <input id="newValue_{{$index}}" ng-model="newValue[$index]" />
      </td>
      <td>
        {{dt.otherData}}
      </td>
    </tr>
  </table>
</div>
<div>
  <button type="button" class="btn btn-primary" value="save" ng-click="saveData()">Save</button>
  <button type="button" class="btn btn-primary" value="save" ng-click="cancel()">Cancel</button>
</div>

控制器 -

angular.module("MyApp",[])
.controller("MyCtrl",[]);
function MyCtrl() {
$scope.saveData = function() {
  for(var i=0; i<$scope.response.length; i++) {
    for(var j=0: j<$scope.response[i].innerData.length; j++) {
      var oldData = document.getElementById("oldValue_"+j).value;
      var newData = document.getElementById("newValue_"+j).value;
        if(newData > 0) {
          $scope.$watch('newValue['+j+']', function(newVal) {
          $scope.dt.oldValue[j] = newVal;
          },true);
        }
      }
    }
  }
}

这是一张简要说明问题的图片 -

编辑-

响应json对象就是这样（字段sselected-measurementData是第一列中显示的那个） -

回复也是这样-

{
  "id": 1,
  "OuterData": [
    {
      "InnerId": 4,
      "InnerData": [
        {
          "CollectionId": 35,
          "CollectionData": [
            {
              "DataId": 81,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_1",
                  "quantityUnitSymbol": "UnitSymbol_1",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-29T14:57:42Z",
                  "measurementData": 400.0
                }
              ]
            }
          ],
          "ExtraData": [
            {
              "quantityUnitName": "Unit_1",
              "quantityUnitSymbol": "UnitSymbol_1",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 521103.0
            },
            {
              "quantityUnitName": "Unit_1",
              "quantityUnitSymbol": "UnitSymbol_1",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 24814.428571428572
            }
          ]
        },
        {
          "CollectionId": 24,
          "CollectionData": [
            {
              "DataId": 58,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_2",
                  "quantityUnitSymbol": "UnitSymbol_1",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-26T08:50:00Z",
                  "measurementData": 9925.0
                }
              ]
            },
            {
              "DataId": 57,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_2",
                  "quantityUnitSymbol": "UnitSymbol_1",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-26T08:50:00Z",
                  "measurementData": 46285.0
                }
              ]
            },
            {
              "DataId": 56,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_2",
                  "quantityUnitSymbol": "UnitSymbol_1",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-26T08:50:00Z",
                  "measurementData": 13465.0
                }
              ]
            }
          ],
          "ExtraData": [
            {
              "quantityUnitName": "Unit_2",
              "quantityUnitSymbol": "UnitSymbol_1",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 1561344.0
            },
            {
              "quantityUnitName": "Unit_2",
              "quantityUnitSymbol": "UnitSymbol_1",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 21685.333333333332
            }
          ]
        },
        {
          "CollectionId": 30,
          "CollectionData": [
            {
              "DataId": 76,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_3",
                  "quantityUnitSymbol": "UnitSymbol_1",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-03-21T14:00:00Z",
                  "measurementData": 16370.0
                }
              ]
            }
          ],
          "ExtraData": [
            {
              "quantityUnitName": "Unit_3",
              "quantityUnitSymbol": "UnitSymbol_1",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 301720.0
            },
            {
              "quantityUnitName": "Unit_3",
              "quantityUnitSymbol": "UnitSymbol_1",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 15086.0
            }
          ]
        }
      ]
    },
    {
      "InnerId": 3,
      "InnerData": [
        {
          "CollectionId": 20,
          "CollectionData": [
            {
              "DataId": 40,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_4",
                  "quantityUnitSymbol": "UnitSymbol_2",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-01T10:39:00Z",
                  "measurementData": 0.0
                }
              ]
            }
          ],
          "ExtraData": [
            {
              "quantityUnitName": "Unit_4",
              "quantityUnitSymbol": "UnitSymbol_2",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 0.0
            },
            {
              "quantityUnitName": "Unit_4",
              "quantityUnitSymbol": "UnitSymbol_2",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 0.0
            }
          ]
        },
        {
          "CollectionId": 18,
          "CollectionData": [
            {
              "DataId": 35,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_5",
                  "quantityUnitSymbol": "UnitSymbol_3",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-18T11:05:22Z",
                  "measurementData": 0.001135
                }
              ]
            }
          ],
          "ExtraData": [
            {
              "quantityUnitName": "Unit_5",
              "quantityUnitSymbol": "UnitSymbol_3",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 0.001135
            },
            {
              "quantityUnitName": "Unit_5",
              "quantityUnitSymbol": "UnitSymbol_3",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 0.001135
            }
          ]
        },
        {
          "CollectionId": 40,
          "CollectionData": [
            {
              "DataId": 36,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_5",
                  "quantityUnitSymbol": "UnitSymbol_3",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-18T11:05:22Z",
                  "measurementData": 1.132728
                }
              ]
            }
          ],
          "ExtraData": [
            {
              "quantityUnitName": "Unit_5",
              "quantityUnitSymbol": "UnitSymbol_3",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 1.132728
            },
            {
              "quantityUnitName": "Unit_5",
              "quantityUnitSymbol": "UnitSymbol_3",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 1.132728
            }
          ]
        },
        {
          "CollectionId": 10,
          "CollectionData": [
            {
              "DataId": 2,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_6",
                  "quantityUnitSymbol": "UnitSymbol_4",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-14T01:29:00Z",
                  "measurementData": 120.0
                }
              ]
            }
          ],
          "ExtraData": [
            {
              "quantityUnitName": "Unit_6",
              "quantityUnitSymbol": "UnitSymbol_4",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 15508.363130715883
            },
            {
              "quantityUnitName": "Unit_6",
              "quantityUnitSymbol": "UnitSymbol_4",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 1.2595113401052451
            }
          ]
        }
      ]
    }
  ]
}

【问题讨论】：

用户是否为 ng-Model2 列的每一行输入值？是不是要相应地体现出来
你能给$scope.response对象吗
@JinsPeter 不需要为每一行输入，这完全取决于用户。我在图片中显示的表格也是一小部分，我的实际案例有 40 多行。假设用户在不同的行输入 10 个值，例如。 row - 1 到 5、10、15 到 18，那么这些数据应该反映到相应行的第一列。对于 $scope.response 对象，它是一个 API 调用响应，并且该对象太大，无法在此处共享。还是让我尝试分享一个紧凑版本的响应。
我只想知道你的控制器中新的 newValue 数组在哪里。 $scope.newValue 是否给出了 newValue 数组
你是否检查了每次迭代 $watch 是否被调用？我的意思是你是否检查了每次迭代时传递的 newValue['+j+']' 值吗？

标签： javascript angularjs watch

【解决方案1】：

你想要这样的东西吗？它只是简单的示例更改将需要根据您的响应数据。

var MyApp = angular.module("MyApp",[]);
MyApp.controller("MyCtrl",['$scope',MyCtrl]);
function MyCtrl($scope) {
$scope.data= [1,2,3,4,5];
$scope.newValue = [];
$scope.saveData = function() {
   if($scope.newValue.length > 0) { 
    angular.forEach($scope.newValue,function(v,k){        
        $scope.data[k] = v;   
    });
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="MyApp"  ng-controller="MyCtrl">
  <table>
    <tr ng-repeat="dt in data track by $index">
      <td>{{dt}}
         <input id="oldValue_{{$index}}" ng-model="dt" />
      </td>
      <td>
        <input id="newValue_{{$index}}" ng-model="newValue[$index]" />
      </td>
      <td>
        {{dt.otherData}}
      </td>
    </tr>
  </table>
<div>
  <button type="button" class="btn btn-primary" value="save" ng-click="saveData()">Save</button>
  <button type="button" class="btn btn-primary" value="save" ng-click="cancel()">Cancel</button>
</div>
</div>

【讨论】：

嗯，在我的情况下，用法与您显示的非常相似。但是，我正在寻找在我的情况下使用 $watch 。但是使用您的方法，即 angular.forEach，我对我的代码进行了一些更改，它对我有用。所以我会接受你的回答，因为我的问题已经用你的方法解决了。
我会建议这种方式。当你想在没有任何事件的情况下更新对象时使用 $watch.. 但是这里你有点击事件所以使用 angular.forEach。当它更复杂时，$watch 也会降低性能。
哦，谢谢！列表也很长，大约 40-50 个条目；在这种情况下，使用 $watch 会以某种方式影响性能吗？
@Trivedi 是的。