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

请检查该小提琴： http://jsfiddle.net/kgXRa/如何从AngularJS动态表单中删除元素？

这里是代码（在实施的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('<div><input type="text" ng-model="field[' + scope.inputCounter + ']"><input type="text" ng-model="value[' + scope.inputCounter + ']"> <a href="javascript:;" ng-click="remove_it(' + scope.inputCounter + ')">remove</a></div> '); 

       var compile = $compile(input)(scope); 
       element.append(input); 
       scope.inputCounter++; 
       scope.remove_it = function(scope_counter) { 
        compile.remove(this); 
        scope.inputCounter--; 
       } 
      }); 
     } 
    } 
}]);

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

随着我写的脚本删除了错误的。

谢谢你们。

来源

2014-05-23 Mr H

你为什么不只是使用一个NG重复，以实时生成你的领域？当我们可以很容易地用核心角码完成时，你不应该真的创建或删除这样的dom节点 – jraede

我知道我们在这里回答人们的问题，但是当我们看到问题没有时，我们该怎么办？因为其他代码只是不好的做法？我们应该回答他想要的还是应该告诉他。我认为应该有一个SO功能正是这个 – Luke

@Luke我个人更喜欢如果有人纠正我，如果我实施了一个错误的做法。我总是正确的练习，而不是解决他/她的问题。谢谢。如果您向我展示更好的解决方案，我将不胜感激。谢谢 –

下面是一个快速和肮脏的例子，说明如何以更“角度的方式”来实现这一点。

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

$scope.inputs = []; 

$scope.addInput = function(){ 
    $scope.inputs.push({field:'', value:''}); 
} 

$scope.removeInput = function(index){ 
    $scope.inputs.splice(index,1); 
}

在你看来，你遍历您使用NG-重复对象的阵列和数据都会自动出现，当你点击按钮消失。

<div ng-app="myApp" ng-controller="MyCtrl"> 
    [<span ng-repeat="input in inputs">"{{input.field}}"</span>]: 
    [<span ng-repeat="input in inputs">"{{input.value}}"</span>] 
    <div ng-repeat="input in inputs"> 
     <input type="text" ng-model="input.field" /> 
     <input type="text" ng-model="input.value" /> 
     <button ng-click="removeInput($index)">Remove</button> 
    </div> 
    <button ng-click="addInput()">add input</button> 
</div>

这里有一个小提琴：http://jsfiddle.net/A6G5r/

来源

2014-05-23 00:50:12 Jerrad

谢谢jsfiddle是不正确的，因为我不能看到你的变化。不是问题伴侣，我得到了照片。 :)除非我生气。请检查这个小提琴，看看它是什么意思是：http://jsfiddle.net/A6G5r/ –

对不起，我一定忘了把我发布的小提琴拨出来。我更新了我的答案以链接到你的答案（它看起来与我的相同）。 – Jerrad

全部好再次感谢队友。 –

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

回答

相关问题