如何从AngularJS动态表单中删除元素？

请检查这个小提琴： http ： //jsfiddle.net/kgXRa/

这是代码（在JSFiddle中实现）

var app = angular.module('myApp', []); app.controller('MyCtrl', ['$scope', function ($scope) { $scope.field = []; $scope.value = []; $scope.inputCounter = 0; }]); app.directive('addInput', ['$compile', function ($compile) { return { restrict: 'A', link: function (scope, element, attrs) { element.find('button').bind('click', function () { var input = angular.element('
 remove
 '); var compile = $compile(input)(scope); element.append(input); scope.inputCounter++; scope.remove_it = function(scope_counter) { compile.remove(this); scope.inputCounter--; } }); } } }]); 

我需要在用户创建新字段时添加删除按钮。 不知何故，我需要删除计数器，以便在用户删除输入时清除数组。 我曾尝试使用jQuery，但我认为Angular.JS应该有一种方法

用我编写的脚本删除了错误的脚本。

多谢你们。

Answer 1

这是一个快速而肮脏的例子，说明如何以更“角度”的方式实现这一目标。

您的行存储为具有一对属性的单个对象数组，并且您有两个用于添加和删除行的函数。

 $scope.inputs = []; $scope.addInput = function(){ $scope.inputs.push({field:'', value:''}); } $scope.removeInput = function(index){ $scope.inputs.splice(index,1); } 

在您的视图中，您使用ng-repeat迭代对象数组，当您单击按钮时，数据会自动显示并消失。

 
 ["{{input.field}}"]: ["{{input.value}}"] 
   Remove 
 add input  

这是一个小提琴： http ： //jsfiddle.net/A6G5r/