注視着一個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-模式

回答

相關問題