Question

我目前正在使用一个复选框来切换8个表单元素上的disabled属性。我在每个元素上都使用了ngDisabled Directive。我正在寻找一种方法，我不必将指令放在8个元素中的每一个上。这可能吗？

复选框切换

<input type="checkbox" ng-model="aircraftOnGround" />

在每个表单元素上使用当前工作的Disabled指令

ng-disabled="aircraftOnGround"

Codepen： CodePen

Answer 1

您可以使用字段集来禁用其中的每个字段。

＆＃13;

var $scope = {};

var myApp = angular.module('myApp', []);

myApp.controller('formCtrl', ['$scope', function($scope){
  $scope.aircraftOnGround = 'true';
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <form ng-controller="formCtrl">
    <fieldset ng-disabled='aircraftOnGround'> <!-- USE NG_DISABLE HERE -->
      <input type="text">
      <input type="text">
    </fieldset>
    <br>
    <b>aircraftOnGround:</b> <button type="button" ng-click="aircraftOnGround = !aircraftOnGround"><span ng-bind="aircraftOnGround"></span></button>
  </form>

</body>

＆＃13;

Answer 2

您可以使用控制器中的观察程序禁用DOM元素的集合。

myapp.controller('mainCtrl', function($scope, $element){
  $scope.aircraftOnGround = false;
  $scope.name = "abdullah";
  $scope.$watch('aircraftOnGround',function(value) {
     $element.find('.form-control').prop('disabled',value);
  });
});

注意：我在示例中使用了jQuery。

基于一个值

2 个答案: