Is there a way to change the key of object dynamically using ng-repeat

Question

My json object looks like this,

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

and i want to change keys for example , i want to change "mainKey1" to "newKey1" in ng-repeat

my html looks like this

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

But looks like using key in ng-model directly doesn't work , can anyone please help to achieve expected result, Thanks in advance

Why you want to do it inside `ng-repeat`? You can also loop over keys in javacript — Rohit Agrawal, Dec 21 '17 at 11:38
@Adelin not sure , but i want to have unique keys , but use can change it dynamically — ganesh, Dec 21 '17 at 11:43
Refer this post https://stackoverflow.com/questions/13391579/how-to-rename-json-key — hrdkisback, Dec 21 '17 at 11:52

Slava Utesinov · Answer 1 · 2017-12-21T12:37:23.293

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>

Thank you @Slava Utesinov , is there a way to do it directly from html itself ? — ganesh, Dec 21 '17 at 12:18
i mean , is there any way to achieve this without going for javascript ? — ganesh, Dec 21 '17 at 12:34
I think no, because you can't include full `changeKey` logic inline into `ng-change` directive. Is it a problem? — Slava Utesinov, Dec 21 '17 at 12:35
not at all , i was just curios to know , and wanted to try if anything available , as i was aware of solution which you have given , but anyways thanks a lot for your efforts , will use this only @Slava Utesinov — ganesh, Dec 21 '17 at 12:47

Is there a way to change the key of object dynamically using ng-repeat

1 Answers1