Редактирование массива AngularJS

Question

Вот мой JS:

var app = angular.module('plunker', []);
  app.controller('MainCtrl', function($scope) {
    $scope.items = [
      {
      "name": "john",
      "params": {
        "age": 22,
        "weight": 66
      }
},
   {
      "name": "eva",
      "params": {
        "age": 19,
        "weight": 54
      }
},
   {
      "name": "jeremy",
      "params": {
        "age": 17,
        "weight": 75
      }
}
    ]
    $scope.add = function(name, age, weight) {

      $scope.items.push({"name" : name, "params" : {"age" : age, "weight" : weight}});
      console.log($scope.items);
    }
  });

Мой HTML:

<div ng-repeat="item in items">
      <p>{{item.name}}</p>
      <input class="form-control" name="type" placeholder="name" ng-model="name">

      <br />

      <ul>
        <li ng-repeat="(name, param) in item.params">{{name}} : {{param}}</li>
        <input class="form-control" placeholder="age" ng-model="age">
         <input class="form-control" placeholder="weight" ng-model="weight">
        <button class="btn btn-clear" type="button" ng-click="add(name, age, weight)">Update</button>
      </ul>

    </div>

Я хочу редактировать массив и помещать этот массив вместо редактирования, а не добавлять как новый массив,Вот мой плункер: http://plnkr.co/edit/ewyzJWJOdNOKoSxWacNX?p=preview Спасибо за ответы заранее!

Answer 1

Просто отследите ng-repeat в вашем HTML по $ index и передайте индекс контроллеру.

 <div ng-repeat="item in items track by $index">
  <p>{{item.name}}</p>
  <input class="form-control" name="type" placeholder="name" ng-model="name">

  <br />

  <ul>
    <li ng-repeat="(name, param) in item.params">{{name}} : {{param}}</li>
    <input class="form-control" placeholder="age" ng-model="age">
     <input class="form-control" placeholder="weight" ng-model="weight">
    <button class="btn btn-clear" type="button" ng-click="add($index, name, age, weight)">Update</button>
  </ul>

</div>

Отредактируйте функцию добавления, как показано ниже

$scope.add = function(index, name, age, weight) {
      if (name) {
         $scope.items[index].name = name;
      } 

      if (age) {
         $scope.items[index].params.age = age;
      } 

      if (weight) {
          $scope.items[index].params.weight = weight;
      }
    }

Нам нужно добавить условия, в противном случае неустановленные параметры будут установлены пустыми.

Проверьте:

http://plnkr.co/edit/K9Nud7u9VqIpbk58uB8b?p=preview

ура!

Answer 2

вы просто захватываете индекс и вносите эти изменения в область действия.

Есть два случая, которые вы можете сделать

Вы можете вставить новый элемент и удалить более старый элемент,что может быть визуально запутанным.

секунда

Вы можете вывести индекс и заменить значения.

$scope.add = function(name, age, weight,index) {

$scope.items[index]={"name" : name, "params" : {"age" : age, "weight" : weight}};
          console.log($scope.items);
        }

отметьте это plunkr

Answer 3

Измените свою логику следующим образом:

    $scope.add = function(name, age, weight,index) {
    if(name)
     $scope.items[index]["name"]=name;
     if(age)
     $scope.items[index]["params"]["age"]=age;
     if(weight)
     $scope.items[index]["params"]["weight"]=weight;
      console.log($scope.items);
    }

обновится соответствующий объект

Здесь обновите plunk http://plnkr.co/edit/ZUqHNNHLSweTHKxkLFRM?p=preview

Answer 4

Просто добавьте index в качестве параметра.Ваша функция add должна стать:

$scope.edit = function(index, name, age, weight) {
  $scope.items[index] = {"name" : name, "params" : {"age" : age, "weight" : weight}};
}

И ваша кнопка должна вызвать эту функцию с параметром $index, который будет получен из ng-repeat:

<button class="btn btn-clear" type="button" ng-click="edit($index, name, age, weight)">
  Update
</button>

---

Если вы хотите обновить только один из параметров, а не все сразу, я предлагаю изменить функцию редактирования на:

var x = $scope.items[index];
$scope.items[index] = {"name" : name || x.name, "params" : {"age" : age || x.params.age, "weight" : weight || x.params.weight}};

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