当我按下angularjs中的一个按钮时，如何禁用其他按钮

有没有可能以角度做到这一点？当我按下一个按钮元素时，其他按钮元素会自动禁用。我看到了一个类似的问题，但在纯粹的angularjs中寻找这个问题。当我按下angularjs中的一个按钮时，如何禁用其他按钮

<html ng-app> 
    <button ng-model="button" > abc </button> 
    <button ng-disabled="button"> def </button> 
    <button ng-disabled="button"> ghi </button> 
</html>

来源

2016-01-05 Deke

可以绑定一个ng-click事件，所有这三个按钮，通过标识的功能（即按钮的id。然后你的函数将一个变量绑定到的范围，然后你可以使用以确定是否ng-disabled应进行或不

例如，在你的控制器，你将有类似的东西：

$scope.selectedButton; 

    $scope.selectButton = function(id) { 
     $scope.selectedButton = id; 
    }

然后，在你的HTML，你将修改它拿在ng-click和ng-disabled考虑上述。

<html ng-app ng-controller="SomeController"> 
    <button ng-disabled="selectedButton && selectedButton != 'abc'" ng-click="selectButton('abc')">abc</button> 
    <button ng-disabled="selectedButton && selectedButton != 'def'" ng-click="selectButton('def')">def</button> 
    <button ng-disabled="selectedButton && selectedButton != 'ghi'" ng-click="selectButton('ghi')">ghi</button> 
</html>

笔记，检查是否selectedButton和selectedButton不等于foo的逻辑，是确定按钮已经被选择，因此该变量被设置为范围。

来源

2016-01-05 21:23:14

谢谢大家。我喜欢这个答案。 – Deke

简单，纯粹的角度方式。

<html ng-app> 
    <button ng-click="buttonsDisabled = true"> abc </button> 
    <button ng-disabled="buttonsDisabled"> def </button> 
    <button ng-disabled="buttonsDisabled"> ghi </button> 
</html>

http://jsfiddle.net/HB7LU/21811/

来源

2016-01-05 21:27:02

此解决方案只适用于一个按钮... –

作者没有说它应该适用于每个按钮。看看他的例子。 “One button”和“Any button”有区别。 –

<html ng-app="yourApp"> 
    <body ng-controller="buttonCtrl"> 
    <button ng-disabled="!button1" ng-click="toggleFunction(1)" > abc </button> 
    <button ng-disabled="!button2" ng-click="toggleFunction(2)" > abc </button> 
    <button ng-disabled="!button3" ng-click="toggleFunction(3)" > abc </button> 
    </body> 
</html> 

<script> 

yourApp.controller('buttonCtrl', ['$scope', function($scope) { 
    function toggleFunction(activeBtn){ 
     if (activeBtn == 1){ 
      $scope.button1 = true; 
      $scope.button2 = false; 
      $scope.button3 = false; 
     } else if (activeBtn == 2){ 
      $scope.button1 = false; 
      $scope.button2 = true; 
      $scope.button3 = false; 
     } else if (activeBtn == 3){ 
      $scope.button1 = false; 
      $scope.button2 = false; 
      $scope.button3 = true; 
     } 
    } 
}]); 
</script>

来源

2016-01-05 21:32:23 MiVvlt

你可以像下面这样做

<script> 
var app=angular.module('myApp', []); 
app.controller('someCtrl',function($scope){ 
    $scope.mySwitch=true; 
    $scope.toggle=function(){ 
    $scope.mySwitch=!$scope.mySwitch; 
    }; 
}); 
</script> 
<div ng-app="myApp"> 
    <div ng-controller="someCtrl"> 
    <p> 
     <button ng-click="toggle()">abc</button> 
    </p> 
    <p> 
     <button ng-disabled="mySwitch">def</button> 
     <button ng-disabled="mySwitch">ghi</button> 
    </p> 
    </div> 
</div>

来源

2016-01-05 21:47:53 gkocyigit

当我按下angularjs中的一个按钮时，如何禁用其他按钮

回答

相关问题