我有一个使用 AngularJS ngForm 指令的表单。此表单显示数组中的项目列表，单击任何项目可将其从数组中删除。默认情况下该按钮是禁用的，如果从数组中删除了一个项目，则应启用该按钮。
有没有办法让 ngForm 跟踪数组的更改并设置 $pristine 状态，以便按钮在禁用和启用?
这是我创建的一个 plnkr，用于演示我对 ngForm 和列表的使用。单击列表中的项目将从列表中删除该项目，但不会启用该按钮。 https://plnkr.co/edit/am8jIazJmKtabx37Ev8C
这是我的示例代码。
JavaScript:
var app = angular.module('myApp', []);
app.controller('MyController', [function() {
var vm = this;
vm.data = [1, 2, 3];
vm.removeItem = function(i) {
var index = vm.data.indexOf(i);
vm.data.splice(index, 1);
}
}]);
HTML:
<body ng-app="myApp">
<div ng-controller="MyController as vm">
<div ng-form="form">
<ul>
<li ng-repeat="i in vm.data" ng-click="vm.removeItem(i)">
Click to remove item - {{i}}
</li>
</ul>
<button type="button" ng-disabled="form.$pristine">
submit
</button>
</div>
</div>
</body>
最佳答案
假设您不想使用 $scope。首先，您必须像下面的代码一样在 vm 变量上声明您的表单，然后您的 Controller 才能看到您的表单。
<form ng-form="vm.form">
...
</form>
那么，在 Controller 内部，您可以强制使用 $dirty 而不是 $pristine。 $priestine 状态意味着表单未被修改，在这种情况下，您想要根据 Angularjs docs for form.FormController 设置未修改的反面 $dirty .
...
vm.form.$setDirty();
...
完整代码:
var app = angular.module('myApp', []);
app.controller('MyController', [function() {
var vm = this;
vm.data = [1, 2, 3];
vm.removeItem = function(i) {
var index = vm.data.indexOf(i);
vm.data.splice(index, 1);
vm.form.$setDirty();
}
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyController as vm">
<div ng-form="vm.form">
<ul>
<li ng-repeat="i in vm.data" ng-click="vm.removeItem(i)">
Click to remove item - {{i}}
</li>
</ul>
<button type="button" ng-disabled="vm.form.$pristine">
submit
</button>
</div>
</div>
</body>关于javascript - 从数组中删除项目时如何使用angularjs ngForm启用按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40119828/