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

只需添加索引作为参数即可。您的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}};

它将使用空{/ 1>的ng-model的默认参数

Answer 2

只需通过$ index跟踪HTML中的ng-repeat，并将索引传递给控制器。

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

我们需要添加条件，否则非set params将被设置为空。

检查一下：

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

喝彩！

Answer 3

您只需捕获索引，并在范围内进行更改。

你可以做两种情况

您可以插入新元素并删除旧元素，这可能会让您感到困惑。

<强>第二

你可以破坏索引并替换值。

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

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

检查此plunkr

Answer 4

改变你的逻辑，如下面的

    $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

编辑阵列AngularJS

4 个答案: