angularjs – ng-disabled活动/非活动

发布时间：2020-12-17 17:49:57 所属栏目：安全来源：网络整理

导读：http://jsfiddle.net/zjqz6wjL/ 我有3个按钮,当你点击一个按钮时,它们都会被禁用. 如果只有我点击的按钮被禁用而另外两个保持活动状态,那就太好了.单击另一个按钮时,该按钮将被禁用,然后将之前禁用的按钮重新激活回活动状态. button ng-click="disableClick(

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',{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指令(尽管如此).
>使用你的btns作为对象
>将其作为数组获取
>使用ng-repeat指令循环它
>在disableClick方法中传递btn对象
>禁用方法中的所有按钮
>然后启用传递的按钮

编辑

受到评论的启发,然后是Joaozito Polo的答案,如果你不想使用物品,这里可以选择.在大多数情况下不推荐使用,但只有2或3个按钮的用例,非paramtric,这是可以接受的.

在这种情况下,您不需要$scope.disableClick(),因此不再需要控制器.

只需声明你的角度模块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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!