基於一個值對一組輸入使用ng-disabled

我目前使用一個複選框來切換8個表單元素上的禁用屬性。我已經在每個元素上使用了ngDisabled Directive。我正在尋找一種方法，我不必把這個指令放在8個元素中的每一個上。這可能嗎？基於一個值對一組輸入使用ng-disabled

複選框切換

<input type="checkbox" ng-model="aircraftOnGround" />

當前工作禁用指令被每個表單元素

ng-disabled="aircraftOnGround"

Codepen這裏所使用的： CodePen

來源

2015-10-14 inspired

您可以使用一個字段集來禁用其中的每個字段。

var $scope = {}; 
 

 
var myApp = angular.module('myApp', []); 
 

 
myApp.controller('formCtrl', ['$scope', function($scope){ 
 
    $scope.aircraftOnGround = 'true'; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp"> 
 
    <form ng-controller="formCtrl"> 
 
    <fieldset ng-disabled='aircraftOnGround'> <!-- USE NG_DISABLE HERE --> 
 
     <input type="text"> 
 
     <input type="text"> 
 
    </fieldset> 
 
    <br> 
 
    <b>aircraftOnGround:</b> <button type="button" ng-click="aircraftOnGround = !aircraftOnGround"><span ng-bind="aircraftOnGround"></span></button> 
 
    </form> 
 

 
</body>

來源

2015-10-14 13:54:12 vinagreti

這工作得很好！沒有額外的JS。 – inspired

不幸的是，它不工作在IE –

對我來說，它也適用於** IE **（版本11） – jpmottin

您可以使用禁用在控制器中守望DOM元素的集合。

myapp.controller('mainCtrl', function($scope, $element){ 
    $scope.aircraftOnGround = false; 
    $scope.name = "abdullah"; 
    $scope.$watch('aircraftOnGround',function(value) { 
    $element.find('.form-control').prop('disabled',value); 
    }); 
});

注：我在這個例子中使用jQuery。

來源

2015-10-14 13:57:02 cgTag

基於一個值對一組輸入使用ng-disabled

回答

相關問題