AngularJS：迭代對象屬性和雙向綁定

我想遍歷對象的屬性。此外，應該有雙向數據綁定，以便任何更改都會更改對象。AngularJS：迭代對象屬性和雙向綁定

對象屬性的鍵和值都可以從UI更改，並應反映在對象的結構中。

我能夠與ng-model="contents[index]"

這樣做對對象的價值，但如何做到這一點與對象屬性鍵如如果我在UI上對其進行更改，對象中的界面將發生更改。

$scope.contents = { 
 
      "interface": "GigabitEthernet", 
 
      "interfaceNumber": "1", 
 
      "BGPneighborIp": "00.0.112.499", 
 
      "BGPremoteAs_[1]": "701", 
 
      "BGPneighborIp_[2]": "8.3.112.170", 
 
      "BGPremoteAs_[2]": "702" 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<tbody> 
 
<tr ng-repeat="(index, p1) in contents"> 
 
<td> 
 
<input class="form-control" type="text" ng-model="index"> 
 
</td> 
 
<td> 
 
<input class="form-control" type="text" ng-model="contents[index]"> 
 
</td> 
 
</tr> 
 
</tbody>

來源

2016-11-08 Mudit

也許[該SO]（http://stackoverflow.com/questions/23643592/how-to -bind-angularjs-objects-to-their-keys-and-values）將會有所幫助。你的共識是不可以的。我會建議改變你的數據結構，因此不需要修改對象的關鍵字。 – ste2425

@ ste2425 - 我有JSON結構背後。根據設計。我需要循環使用不同的對象並在UI上顯示它。鍵和值可以從UI改變，並應該反映在後面的JSON。沒有保存或提交來更改值，這就是爲什麼需要雙向綁定。將對象轉換爲數組需要額外的努力以JSON再次合併它。 – Mudit

嘗試這種解決方案：

angular.module('app',[]).controller('test',['$scope', function($scope){ 
 
    $scope.contents = {  
 
      "interface": "GigabitEthernet", 
 
      "interfaceNumber": "1", 
 
      "BGPneighborIp": "00.0.112.499", 
 
      "BGPremoteAs_[1]": "701", 
 
      "BGPneighborIp_[2]": "8.3.112.170", 
 
      "BGPremoteAs_[2]": "702" 
 
    }; 
 

 
    $scope.arr = []; 
 
    for(var prop in $scope.contents) 
 
     $scope.arr.push({oldKey:prop, newKey:prop}); 
 

 
    $scope.change = function(item){         
 
     $scope.contents[item.newKey] = $scope.contents[item.oldKey];   
 
     delete $scope.contents[item.oldKey]; 
 
     item.oldKey = item.newKey; 
 
    } 
 
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app='app' ng-controller='test'> 
 
    <input ng-repeat-start='item in arr' type='text' ng-model="item.newKey" ng-change='change(item)'> 
 
    <input type='text' ng-model="contents[item.oldKey]" > 
 
    <br ng-repeat-end> 
 
    <p>{{contents|json}}</p> 
 
</div>

來源

2016-11-08 11:47:20

它的工作，但關鍵在按排序順序改變位置。例如，如果將BGPneighborIp更改爲BGPneighborIp，它將成爲第四個元素。如果我們有一個巨大的桌子，從UI的角度來看，這是不好的。除了排序之外，還有解決方案嗎？ – Mudit

在這種情況下，您應該有''scope.contents'的投影/副本，例如數組像'[{key：'interface'，value：'GigabitEthernet'} ,,,]'，並且反映這個副本到'$ scope.contents'，反之亦然 –

即使我們有一個副本，ng-repeat對象也會維護排序順序。所以改變任何一個關鍵字都會改變它的位置。 – Mudit

AngularJS：迭代對象屬性和雙向綁定

回答

相關問題