观察一个ng模型并将更改应用于ng-repeat中的另一个ng模型

时间：2017-04-27 05:07:23

标签： javascript angularjs watch

我有以下工作案例 -

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

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

我在循环中使用了$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);
        }
      }
    }
  }
}

这是一张简要介绍问题的图片 -

enter image description here

编辑 -

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

enter image description here

同样的回应是 - 

{
  "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
            }
          ]
        }
      ]
    }
  ]
}

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题