AngularJS:添加,删除和重新排序由数组控制的项目

时间:2015-03-04 18:08:42

标签: javascript jquery arrays angularjs angularjs-ng-repeat

我在表格中有一个ng-repeat。在较大的表中有几个这样的表。每行都有按钮,用于"添加另一行" (我已经工作了)并删除了当前的行/移动行(我不会这样做)。

enter image description here

它们是使用数组创建的,表中的每个组都有自己的数组,其中一个成员可以启动。

  vm.choices1 = [{ id: 'choice1' }];
  vm.choices2 = [{ id: 'choice1' }];
  vm.choices3 = [{ id: 'choice1' }];

单击加号按钮会传递当前数组并将新项目推送到该数组,从而添加转发器。

vm.addNewChoice = function(arr) {
 var newItemNo = arr.length + 1;
  arr.push({
    'id': 'choice' + newItemNo
  });
};

这很好用。当然,现在我被要求添加删除按钮和上/下按钮。

我理解我需要做什么:我想某种方式当点击删除按钮时我需要将该索引号传递给删除函数并从传递的数组中弹出该索引:

vm.deleteChoice = function(arr) {
    arr.splice(index, index+1); //??
};

但我不确定如何获取并将点击的索引传递给该函数。我曾经知道如何在jQuery中执行此操作,但不是在Angular中。如果我可以将点击的项目的索引输入到我的函数中,我确定我也可以从那里找出u / down按钮。

基本的捣蛋鬼:http://plnkr.co/edit/WPdnmYbDSXC0LsbeMduM?p=preview

1 个答案:

答案 0 :(得分:2)

指令ng-repeat为其迭代的每个项创建一个范围。分配给此范围的部分数据是属性$index,它将等于项/对象数组中的索引。

来源:https://docs.angularjs.org/api/ng/directive/ngRepeat