すべての入力要素を無効にする

Question

ページに10個の入力要素があるとします。私は動的例えばng-model

の状況に基づいて、それらにng-disabledを追加したい：

<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を通じて角度属性要素を追加することはできますか？

Answer 1

はい、できます。すべての入力に対して実行されるinput要素のディレクティブを定義できます。次に、無効な状態を格納するサービスを持ち、ng-disabledを使用せずに無効なプロパティを直接設定するために、ディレクティブの変更を「購読する」ことができます。

私はサービスをもっと複雑にする必要があると思います。おそらく、名前の異なるグループがすべてではなくトグルできるようにする必要があります。グループの名前は、包含要素または入力ごとに指定することもできます。

また、指示文がテキスト入力であるかどうかをチェックする必要があるため、アプリケーションのラジオボタン、チェックボックス、数値入力などには適用されません。あなたは、元のHTMLでそれを書いていないのはなぜ

Full Plunkr example

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>