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

请检查这把小提琴：

下面是代码（在JSFIDLE中实现）

var-app=angular.module（'myApp'，[]）；
app.controller（'MyCtrl'，['$scope'，函数（$scope）{
$scope.field=[]；
$scope.value=[]；
$scope.inputCounter=0；
}]);
app.directive（'addInput'，['$compile'，function（$compile）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
元素。查找（'button'）。绑定（'click'，函数（）{
变量输入=角度元素（“”）；
var compile=$compile（输入）（范围）；
元素。追加（输入）；
作用域.inputCounter++；
scope.remove\u it=函数（scope\u计数器）{
编译。删除（此）；
scope.inputCounter--；
}
});
}
}
}]);

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

用我写的脚本删除错误的脚本

---

谢谢大家。

这里有一个快速而肮脏的例子，说明如何以更“角度”的方式完成这项任务

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

$scope.inputs = [];

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

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

在视图中，使用ng repeat对对象数组进行迭代，单击按钮时数据会自动显示和消失

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

[“{input.field}}”]：
[“{input.value}}”]
去除
添加输入

---

这里有一个问题：

为什么不使用ng repeat动态生成字段呢？你不应该真的像这样创建或删除dom节点，因为它可以很容易地用core angular code完成。我知道我们在这里是为了回答人们的问题，但是当我们看到这个问题无关紧要，因为代码的其余部分只是不好的实践时，我们应该怎么做？我们应该回答他想要什么还是告诉他。我认为应该有一个这样的功能正是fotthis@Luke我个人更喜欢在我实施错误实践时有人纠正我。我总是通过练习纠正别人的错误，而不是仅仅解决他/她的问题。谢谢如果你能给我一个更好的解决方案，我将不胜感激。谢谢谢谢，JSFIDLE不是正确的，因为我看不到您在其中所做的更改。没关系，伙计，我知道了除非我疯了。请检查一下这把小提琴，看看它是否是它的本意：对不起，我一定是忘了用叉子叉我贴的小提琴了。我已经将我的答案更新为你的链接（看起来和我的一样）。再次感谢你，伙计。

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