注视着一个NG-模型和NG-重复应用切换到另一个NG-模式

我有以下的工作情况 -注视着一个NG-模型和NG-重复应用切换到另一个NG-模式

在HTML中，我使用ng-repeat API响应填充表数据。表格中有两个不同的列，分别具有不同的ng-model s。一列将有从响应中获得的数据，而另一列在表加载时将是空白的。

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

我在循环中使用了$watch，但显然在循环的最后一次迭代中获得的值被存储并反映在第一列中。我也看了成watchGroup但有效期为角版本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 
      } 
      ] 
     } 
     ] 
    } 
    ] 
}

来源

2017-04-27 HardikT

是否为用户NG-模型2列中的每一行进入价值？这是相应的反映 –

你可以给$ scope.response对象 –

@JinsPeter它不需要输入每行，这一切都取决于用户。另外，我在图像中显示的表格是一小部分，我的实际案例有40多行。假设用户在不同的行输入10个值，例如。行 - 1到5,10,15到18，那么这些数据应该反映到相应行的第一列。为$ scope.response对象，它的一个API调用响应和对象太大而无法在此共享。还是让我试着分享一个紧凑版本的回复。 – HardikT

你想要这样的东西吗？根据你的回答数据，它只是简单的例子变化。

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>

来源

2017-04-27 05:49:18 Jenny

那么在我的情况下使用情况是非常相似到你展示的内容。不过，我在寻找使用$ watch的例子。但是使用你的方法，例如angular.forEach，我在代码中做了一些改变，它对我很有用。所以我会接受你的答案，因为我的问题已经用你的方法解决了。 – HardikT

我会这样建议。当你想更新没有任何事件的对象时使用$ watch。但是在这里你有点击事件，所以使用angular.forEach。并且$ watch在更复杂的情况下会降低性能。 – Jenny

哦，谢谢！这份名单也相当长，大约有40-50条;在这种情况下会使用$ watch以某种方式阻碍性能？ – HardikT

注视着一个NG-模型和NG-重复应用切换到另一个NG-模式

回答

相关问题