Question

我有一个div，它有许多按钮和一个主按钮。我想在点击主按钮后禁用整个div。像下面这样的东西

<body ng-app>
    <div ng-disabled="disableDiv">
      <input type="button" value="btn1" >
      <input type="button" value="btn2" >
      <input type="button" value="btn3" >
      <input type="button" value="Main Button" ng-click="disableDiv=true">
    </div>
  </body>

Answer 1

选项包括：

使用fieldset而不是div：

＆＃13;

var app = angular.module('app', []);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body ng-app='app'>
    <fieldset ng-disabled="disableDiv">
      <input type="button" value="btn1" >
      <input type="button" value="btn2" >
      <input type="button" value="btn3" >
      <input type="button" value="Main Button" ng-click="disableDiv=true">
    </fieldset >
</body>

＆＃13;

手动停用：

＆＃13;

var app = angular.module('app', []);
app.controller('myController', function($scope) {
  $scope.disable = function(evt) {
    angular.element(evt.target.parentNode).children().attr('disabled', true);
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body ng-app='app' ng-controller="myController">
    <div>
      <input type="button" value="btn1" >
      <input type="button" value="btn2" >
      <input type="button" value="btn3" >
      <input type="button" value="Main Button" ng-click="disable($event)">
    </div>
</body>

＆＃13;

每个元素

ng-disabled

＆＃13;

var app = angular.module('app', []);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body ng-app='app'>
  <div>
    <input type="button" value="btn1" ng-disabled="disableDiv">
    <input type="button" value="btn2" ng-disabled="disableDiv">
    <input type="button" value="btn3" ng-disabled="disableDiv">
    <input type="button" value="Main Button" ng-disabled="disableDiv" ng-click="disableDiv=true">
  </div>
</body>

＆＃13;

Answer 2

您可以在控制器中创建一个功能，并为每个按钮设置disabled属性：

<强> JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.btnDisabled = false;

  $scope.disableDiv = function() {
   $scope.btnDisabled = true;
  }

});

<强> HTML

<body ng-controller="MainCtrl">
  <div>
    <input type="button" value="btn1" ng-disabled="btnDisabled">
    <input type="button" value="btn2" ng-disabled="btnDisabled">
    <input type="button" value="btn3" ng-disabled="btnDisabled">
    <input type="button" value="Main Button" ng-click="disableDiv()" ng-disabled="btnDisabled">
  </div>
</body>

Plunker

Answer 3

你可能想要这样的东西：

<body ng-app>
    <div ng-hide="disableDiv">
        <input type="button" value="btn1" >
        <input type="button" value="btn2" >
        <input type="button" value="btn3" >
        <input type="button" value="Main Button" ng-click="disableDiv=true">
    </div>
</body>

ng-hide指令会在元素值为true时隐藏该元素。

Answer 4

ng-disabled仅适用于HTML输入元素。 div元素没有“禁用”属性，这就是它失败的原因。 https://docs.angularjs.org/api/ng/directive/ngDisabled#usage

使用ng-disabled禁用div内的按钮

4 个答案: