Question

我希望在某个条件为真时禁用包含许多选项卡的大型表单中的所有表单元素。我可以使用<input ng-disabled="myCondition()">之类的东西，但我需要在很多地方添加它，这似乎是糟糕的代码重复。经过一番考虑后，我决定在控制器中使用以下内容。（我使用coffeescript btw）

$scope.$watch 'myCondition()', ->
  if $scope.myCondition()
    $('.my-form').find('input, select, textarea').attr('disabled', true)
  else
    $('.my-form').find('input, select, textarea').attr('disabled', false)

这有效但看起来很脆弱。例如，如果我有一些其他原因需要有条件地禁用表单元素，那么这可能会表现得很奇怪。这样做的正确方法是什么。是否与$compile有关？

Answer 1

如果您只想禁用一组输入（在这种情况下标题有点误导），您可以尝试<fieldset>：

<fieldset ng-disabled="common.condition">
    <input ng-model="input1" ... />
    <input ng-model="input2" ... />
    ...
</fieldset>

他们都将被禁用。

Answer 2

您也可以为此编写自定义指令。例如：

app.directive('disableElements', function() {
    return {
        link: function(scope, element, attrs) {

            var elements = angular.element(element[0].querySelectorAll('input, textarea, select'));

            scope.$watch(attrs.disableElements, function(newVal) {
                elements.prop('disabled', !!newVal);
            });
        }
    };
});

并像这样使用它：

<form disable-elements="condition">
    ...
</form>

好处是您可以在指令中选择要禁用的元素，例如某个类。如果您想要禁用表单中的所有元素，则应该定义为采用Nikos提出的fieldset方法。

将angular指令应用于一组元素

2 个答案:

演示：http://plnkr.co/edit/pQkdQvABAytudRhC8bw2?p=preview