How to edit object properties with `ng-repeat` and `ng-model` input

Question

Here is my HTML :

  <div ng-repeat="n in items">

           <ul ng-repeat="(name, param) in n.params"  style="list-style-type: none;">
             <li>{{name}} : {{param}}</li>
           </ul>
       <input style="display:inline;width:130px;margin-bottom:5px;margin-top:5px;"
           class="form-control" name="text" placeholder="age"
           ng-model="age">
       <input style="display:inline;width:115px;margin-bottom:5px;margin-top:5px;" 
           class="form-control" name="text" placeholder="weight"
           ng-model="weight">
       <br />
       <button class="btn btn-warning" type="button"
           ng-click="add(n.params , age , weight)">Update</button>
 </div>

My JS:

$scope.items = [ 
       {
          "params": {
            "age": 22,
            "weight": 66
          }
     },
       {
          "params": {
            "age": 19,
            "weight": 54
          }
     },
       {
          "params": {
            "age": 17,
            "weight": 75
          }
    }
 ]


   $scope.add = function(params , age, weight) {
         $scope.params = params;
         if(age)
          $scope.params.age = age;
       if(weight)
          $scope.params.weight = weight;
          console.log($scope.params);
        }

I want to edit array exactly like in my example, but in something like this look :

 <ul ng-repeat="(name, param) in n.params"  style="list-style-type: none;">
    <li>{{name}} :   
        <input style="display:inline;width:130px;margin-bottom:5px;margin-top:5px;"
            class="form-control" name="text" placeholder="param"
            ng-model="param">
    </li>
 </ul>

Here is my plunker : http://plnkr.co/edit/h4BGIs8nPM3wZfJrwcFT?p=preview Thanks for answers in advance!!!

georgeawg · Accepted Answer · 2018-06-03T16:47:32.887

The ng-repeat directive creates a child scope which hides values when the ng-model attribute specifies a primitive:

<div ng-repeat="n in items">    
    <ul>
        <li ng-repeat="(key, value) in n.params">
          {̶{̶k̶e̶y̶}̶}̶ ̶:̶ ̶<̶i̶n̶p̶u̶t̶ ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶v̶a̶l̶u̶e̶"̶>̶
          {{key}} : <input ng-model="n.params[key]">
        </li>
    </ul>
</div>

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models.

For more information, see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?.

How to edit object properties with `ng-repeat` and `ng-model` input

1 Answers1