假设我在一个页面上有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
。
我想您将需要使服务更复杂,并且可能允许切换不同的命名组,而不是全部或全部。您甚至可以在包含元素上或为每个输入指定组的名称。
您可能还需要检查指令是否为文本输入,因此不会将其应用于应用程序中的每个单选按钮,复选框,数字输入等。
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] 删除。
我来说两句