ng禁用所有输入元素

布鲁

假设我在一个页面上有10个输入元素。我想ng-disabled根据状态动态地添加到他们ng-model

例如:

<input type="text">
<input type="text">

我不想使用包含<fieldset></fieldset>

是否可以通过类似循环的方式实现?

var allInputs = document.getElementsByTagName("input");
$scope.schoolClosed = true;

angular.forEach(allInputs, function(currentInput) {
  currentInput.setAttribute("ng-disabled", "schoolClosed");
});

这将产生如下结果:

<input type="text" ng-disabled="schoolClosed">
<input type="text" ng-disabled="schoolClosed">

我可以像这样通过dom添加角度属性元素吗?

格雷格

是的你可以。您可以为input元素定义指令,该指令将在所有输入中运行。然后,您可以使用一项服务来存储禁用状态,并“订阅”指令中的更改以直接设置禁用属性,而无需使用ng-disabled

我想您将需要使服务更复杂,并且可能允许切换不同的命名组,而不是全部或全部。您甚至可以在包含元素上或为每个输入指定组的名称。

您可能还需要检查指令是否为文本输入,因此不会将其应用于应用程序中的每个单选按钮,复选框,数字输入等。

完整的Plunkr示例

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

app.service('InputDisableService', function() {
  this._isDisabled = false;
  this._subscribers = [];
  this.disabled = function(val) {
    if (arguments.length < 1) {
      return this._isDisabled;
    }
    var prev = !!this._isDisabled;
    if (prev !== !!val) {
      this._isDisabled = !!val;
      for (var i = 0, len = this._subscribers.length; i < len; i++) {
        this._subscribers[i].call(null, this._isDisabled, prev);
      }
    }
  };
  this.toggle = function() {
    this.disabled(!this.disabled());
  }
  this.subscribe = function(callback) {
    this._subscribers.push(callback);
    // invoke immediately with current value, too
    callback(this.disabled());
    var self = this;
    return {
      unsubscribe: function() {
        self.subscribers = self.subscribers.filter(function(sub) {
          return sub !== callback;
        });
      }
    };
  };
});

app.directive('input', function(InputDisableService) {
  return {
    restrict: 'E',
    link: function($scope, $element) {
      var sub = InputDisableService.subscribe(function(disabled) {
        $element.prop('disabled', disabled);
      });
      var off = $scope.$on('$destroy', function() {
        sub.unsubscribe();
        off();
      });
    }
  }
});

app.controller('MainCtrl', function($scope, InputDisableService) {
  $scope.inputs = [];
  for (var i = 1; i <= 100; i++) {
    $scope.inputs.push(i);
  }

  $scope.toggleDisabled = function() {
    InputDisableService.toggle();
  };

  $scope.isDisabled = function() {
    return InputDisableService.disabled();
  };

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <p>Inputs disabled: {{isDisabled()}} <a href="#" ng-click="toggleDisabled(); $event.preventDefault();">Toggle</a></p>

  <p ng-repeat="num in inputs">
    <label>Input {{num}}
      <input type="text">
      </label>
  </p>

</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章