AngularJS: Итерация над свойствами объекта и привязкой в ​​двух направлениях

Question

Я хочу перекрыть свойство объекта. Кроме того, должно быть двустороннее связывание данных, так что любое изменение также изменит объект.

Оба ключа и значение свойства объекта могут быть изменены из пользовательского интерфейса и должны отражаться в структуре объекта.

Я могу сделать это за ценности объекта с ng-model="contents[index]"

, но как это сделать с помощью ключа свойства объекта, например, интерфейс в объекте изменится, если я изменю его в пользовательском интерфейсе.

$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>

Answer 1

Попробуйте это решение:

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>