修改

Question

我有3个按钮，当您点击按钮时，它们都会被禁用。

如果只有我点击的按钮被禁用而其他两个保持活动状态，那就太好了。当点击另一个按钮时，一个按钮被禁用，然后将之前禁用的按钮重新激活回活动状态。

        <button ng-click="disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Disable ng-click 1</button>

Answer 1

你可以这样做：

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指令（虽然它没有被发现）。
将您的btns用作对象
将其作为数组
使用ng-repeat指令循环播放
在disableClick方法
禁用方法中的所有按钮
然后启用传递按钮

修改

受到评论的启发，然后是Joaozito Polo的答案，如果你不这样做，可以选择其他方式。想要使用对象。在大多数情况下不推荐使用，但只有2或3个按钮的用例，非参数，是可以接受的。

在这种情况下，你不需要$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

Answer 2

以下是我在不使用控制器的情况下设法做的事情：

<body ng-app="ngToggle">
<div ng-controller="AppCtrl" ng-init = "disabled=0">
    <button ng-click = "disabled = disabled == 1 ? 0 : 1"  ng-disabled="disabled == 1" ng-model="isDisabled">Disable ng-click 1</button>
   <button ng-click="disabled = disabled=== 2 ? 0 : 2" ng-disabled="disabled == 2" ng-model="isDisabled">Disable ng-click 2</button>
   <button ng-click="disabled = disabled=== 3 ? 0 : 3" ng-disabled="disabled == 3" ng-model="isDisabled">Disable ng-click 3</button>
</div>

这里是小提琴：http://jsfiddle.net/zjqz6wjL/8/

Answer 3

您可以存储最后点击的按钮信息，并检查ngDisabled：

<button ng-click="click(1)" ng-disabled="lastClicked == 1">Disable ng-click 1</button>

和你的行动：

$scope.click = function(btn) {
    alert("Clicked!");
    $scope.lastClicked = btn;
    return false;
}

您可以在jsfiddle

上看到

ng-disabled活动/非活动

3 个答案:

修改