ng-disabled可以禁用子元素组吗?

时间:2014-08-16 21:28:39

标签: angularjs

我正在尝试在其父元素中使用ng-disabled禁用一组元素。似乎没有用。 这是否意味着我必须在所有子元素中使用相同的条件才能禁用?

我无法通过将ul-li元素放入ng-disabled =“true”来禁用所有元素。它仅在我放入input元素时才有效。这是怎么回事?此外,ng-disabled =“true”不适用于lable或span!

<ul style="list-style:none">
    <li>
        <input type="radio" id="radio1" ng-model="color" value="red">
        <label for="radio1" class=""><span>Red</span></label>
    </li>
    <li>
        <input type="radio" id="radio2" ng-model="color" value="green">
        <label for="radio2" class=""><span>Green</span></label>
    </li>
    <li>
        <input type="radio" id="radio3" ng-model="color" value="blue">
        <label for="radio3" class=""><span>Blue</span></label>
    </li>

小提琴:http://jsfiddle.net/chiranjib_halder1/pqvz9veu/3/

2 个答案:

答案 0 :(得分:2)

您可以使用此指令: https://github.com/pleerock/angular-disable-all.git basicaly选择指令中的元素并禁用它们。

这是使用此指令的小提琴代码:

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
  <script src="https://cdn.rawgit.com/pleerock/angular-disable-all/master/dist/angular-disable-all.min.js"></script>
<body ng-app="radioExample">
   <script>
   angular.module('radioExample', ['disableAll'])
     .controller('ExampleController', ['$scope', function($scope) {
       $scope.color = 'blue';
       $scope.specialValue = {
         "id": "12345",
         "value": "green"
       };
     }]);
 </script>
 <div ng-controller="ExampleController">
 <input type="checkbox" ng-model="isDisabled">Disable all<br>
 	<ul style="list-style:none" disable-all="isDisabled">
 		<li>
   			<input type="radio" id="radio1" ng-model="color" value="red">
   			<label for="radio1" class=""><span>Red</span></label>
    	</li>
 		<li>
   			<input type="radio" id="radio2" ng-model="color" value="green">
   			<label for="radio2" class=""><span>Green</span></label>
    	</li>
 		<li>
   			<input type="radio" id="radio3" ng-model="color" value="blue">
   			<label for="radio3" class=""><span>Blue</span></label>
    	</li>
       <tt>color = {{color | json}}</tt><br/>
   <button type="button">Click Me!</button>
   </ul>
  
  </div>
</body>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

ng-disabled仅用于输入元素。在这里,&#34;检查&#34;用于在选中复选框后启用按钮。这是一个假设的例子:

Click me to toggle: <input type="checkbox" ng-model="checked"><br/>
<button ng-model="button" ng-disabled="checked">Button</button>

https://docs.angularjs.org/api/ng/directive/ngDisabled