So deaktivieren Sie eine <option> von ausgewählten Elementen bei Verwendung von AngularJS ng-Optionen?
-
20-12-2019 - |
Frage
Gibt es eine Möglichkeit, eine zu deaktivieren option
in einem select
element, wenn wir bevölkern options
mit ng-Optionen in AngularJS?
Wie das: http://www.w3schools.com/tags/att_option_disabled.asp
Sie können es tun, indem Sie hinzufügen ng-disabled
zu jedem <option>
tag, aber gibt es eine Möglichkeit, dies zu tun, wenn wir das verwenden ng-options
richtlinie in der select
anhängsel?
Lösung
Eine Möglichkeit, dies zu tun, besteht darin, die Verwendung zu vergessen ng-options
auf der select
element, und fügen Sie die Optionen mit hinzu ng-repeat
, dann können Sie eine hinzufügen ng-disabled
überprüfen Sie auf jedem option
.
<div ng-app="myapp">
<form ng-controller="ctrl">
<select id="t1" ng-model="curval">
<option ng-repeat="i in options" value="{{i}}" ng-disabled="disabled[i]">{{i}}</option>
</select>
<button ng-click="disabled[curval]=true">disable</button>
</form>
</div>
ein minimaler Controller zum Testen:
angular.module('myapp',[]).controller("ctrl", function($scope){
$scope.options=['test1','test2','test3','test4','test5'];
$scope.disabled={};
})
Andere Tipps
Von Angular 1.4 :Wir können verwenden disable when
in ng-Optionen zum Beispiel:
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light', notAnOption: true},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark', notAnOption: true},
{name:'yellow', shade:'light', notAnOption: false}
];
$scope.myColor = $scope.colors[2]; // red
In diesem Beispiel sind Farben nach Farbton gruppiert, wobei einige deaktiviert sind:
<select ng-model="myColor" ng-options="color.name group by color.shade disable when color.notAnOption for color in colors"></select>
Ich habe diesen Code von bekommen die Angular Dokumentation.
Sie sollten verwenden ng-disabled
Richtlinie http://docs.angularjs.org/api/ng.directive:ngDisabled.
<body ng-app="myApp">
<div ng-controller="myCtrl">
<form class="form-inline">
<div class="form-group">
<select class="form-control" ng-disabled="disableSelect">
<option val="one">First</option>
<option val="two">Second</option>
</select>
</div>
<button class="btn btn-default" ng-click="disableSelect = !disableSelect">
Disable select
</button>
</form>
</div>
</body>
Hier finden Sie das vollständige Beispiel http://jsbin.com/ihOYurO/1/
Lösen Sie mit Version 1.4 https://docs.angularjs.org/api/ng/directive/ngOptions [überprüfen Sie, ob Sie nach Dokumentation zu Version 1.4 suchen]
Wahrscheinlich so etwas
<button ng-click='disableSelect=true'></button>
<select ng-disabled='disableSelect'></select>