Question

有可能以棱角分明吗？当我按下一个按钮元素时，其他按钮元素会自动被禁用。我看到一个类似的问题，但在纯粹的angularjs中寻找这个。

HttpContext.Current.Response.Write(message + " is full");

Answer 1

您可以将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的逻辑是确定已经选择了一个按钮，因此该变量被设置为范围。

Answer 2

简单，纯粹的角度方式。

<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/

Answer 3

<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>

Answer 4

你可以这样做

<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>

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

4 个答案: