Question

我想循环一个对象的属性。此外，应该有一个双向数据绑定，以便任何更改也将改变对象。

对象属性的键和值都可以从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>

Answer 1

试试这个解决方案：

＆＃13;

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;
  }
}])

＆＃13;

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

＆＃13;

AngularJS：迭代对象属性和双向绑定

1 个答案: