ng - 모든 입력 요소를 비활성화하십시오

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을 사용하지 않고 직접 비활성화 된 속성을 설정하도록 지시문의 변경 내용을 "구독"할 수 있습니다.

나는 당신이 당신의 서비스를 좀 더 복잡하게 만들 필요가있을 것이며 아마도 다른 이름으로 된 그룹이 전부 또는 일부가 아닌 토글 될 수 있다고 생각할 것이다. 포함하는 요소 또는 각 입력에 대해 그룹의 이름을 지정할 수도 있습니다.

또한 지시문에서 텍스트 입력 여부를 확인해야 응용 프로그램의 모든 단일 라디오 버튼, 확인란, 숫자 입력 등에 적용되지 않을 수 있습니다.

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>