Как редактировать свойства объекта с помощью ввода `ng-repeat` и` ng-model` - PullRequest
Новая
       35

Как редактировать свойства объекта с помощью ввода `ng-repeat` и` ng-model`

0 голосов
/ 03 июня 2018

Вот мой 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>

Мой 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);
        }

Я хочу редактировать массив точно так же, как в моем примере, но примерно так: 

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

Вот мой плункер: http://plnkr.co/edit/h4BGIs8nPM3wZfJrwcFT?p=preview Спасибо за ответы заранее !!!

1 Ответ

0 голосов
/ 03 июня 2018

Директива ng-repeat создает дочернюю область, которая скрывает значения, когда атрибут ng-model указывает примитив: 

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

Эту проблему с примитивами можно легко избежать, следуя "передовой практике"всегда есть «.»в ваших ng-моделях.

Для получения дополнительной информации см. Каковы нюансы прототипа / прототипического наследования в AngularJS? .

...