http://jsfiddle.net/zjqz6wjL/
我有 3 个按钮,当您单击一个按钮时,它们都会被禁用。
如果只有我单击的按钮被禁用而其他两个保持事件状态,那就太好了。单击另一个按钮时,该按钮将被禁用,然后将先前禁用的按钮重新激活回事件状态。
<button ng-click="disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Disable ng-click 1</button>
最佳答案
你可以这样做 :
angular.module('ngToggle', [])
.controller('AppCtrl',['$scope', function($scope){
$scope.btns = [
{name:'1',isDisabled:false},
{name:'2',isDisabled:false},
{name:'3',isDisabled:false}
];
$scope.disableClick = function(btn) {
alert("Clicked!");
angular.forEach($scope.btns,function(_btn){
_btn.isDisabled = false;
});
btn.isDisabled = true;
return false;
}
}]);
使用此模板:
<body ng-app="ngToggle">
<div ng-controller="AppCtrl">
<button ng-repeat="btn in btns" ng-click="disableClick(btn)" ng-disabled="btn.isDisabled">Disable ng-click {{btn.name}}</button>
</div>
</body>
见这里:https://jsfiddle.net/dy7g0snx/
ng-model
这里的指令(虽然它没有被取消)。 ng-repeat
循环指令disableClick
中传递 btn 对象方法编辑
受到评论的启发,然后是 Joaozito Polo 的答案,如果您不想使用对象,这里是另一种选择。在大多数情况下不建议这样做,但对于只有 2 或 3 个按钮的用例,非参数,这是可以接受的。
在这种情况下,您不需要
$scope.disableClick()
因此,也不再需要 Controller 。只需声明您的 Angular 模块 js-side :
angular.module('ngToggle', []);
并使用
ng-click
然后 ng-disable
内容关联中的指令:<body ng-app="ngToggle">
<button ng-click="disabled = 1" ng-disabled="disabled == 1">Disable ng-click 1</button>
<button ng-click="disabled = 2" ng-disabled="disabled == 2">Disable ng-click 2</button>
<button ng-click="disabled = 3" ng-disabled="disabled == 3">Disable ng-click 3</button>
</body>
请注意,我删除了
ng-controller
指令也是,因为它现在不会定义 js 端。见demo here
关于angularjs - ng-disabled 事件/非事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31434307/