有没有办法使用 ng-repeat 动态更改对象的键

Question

我的 json 对象是这样的，

$scope.myObject = {
                  "mainKey1":{
                     "name": "x",
                     "age": "20"
                   },
                  "mainKey2":{
                     "name":"y",
                     "age":"25"
                   },
                  "mainKey3":{
                      name:"z",
                      "age":"30"
                   }
                 };

我想改变 keys 例如， 我想将ng-repeat 中的"mainKey1" 更改为"newKey1"

我的 html 看起来像这样

<div ng-repeat="(key,obj) in myObject">
  <label>Name</label>
  <input type="text" name="name" ng-model="obj.name" 
    placeholder="enetr name"/><br/>

  <label>Age</label>
  <input type="text" name="age" ng-model="obj.age" placeholedr="enter age" /><br/>

  <label>Key </label>
  <select ng-options="k for k in keyCollection" ng-model="key" >
  </select>
</div>

但是看起来直接在ng-model中使用key不起作用，任何人都可以帮助达到预期的结果，提前谢谢

Answer 1

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.myObject = {
    "mainKey1": {
      "name": "x",
      "age": "20"
    },
    "mainKey2": {
      "name": "y",
      "age": "25"
    },
    "mainKey3": {
      "name": "z",
      "age": "30"
    }
  };

  $scope.keyCollection = ['newKey1', 'newKey2', 'newKey3'];
  for (var key in $scope.myObject)
    $scope.keyCollection.push(key);

  $scope.changeKey = function(next, ex) {
    if (Object.keys($scope.myObject).indexOf(next) == -1) {
      var temp = $scope.myObject[ex];
      delete $scope.myObject[ex];
      $scope.myObject[next] = temp;
    }
  }

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl'>

  <div ng-repeat="(key,obj) in myObject">
    <label>Name</label>
    <input type="text" name="name" ng-model="obj.name" placeholder="enter name" /><br/>

    <label>Age</label>
    <input type="text" name="age" ng-model="obj.age" placeholedr="enter age" /><br/>

    <label>{{key}}</label>
    <select ng-options="k for k in keyCollection" ng-change='changeKey(temp, key)' ng-model='temp' ng-init='temp=key'></select>
    <br>
    <br>
  </div>
</div>