So deaktivieren Sie eine <option> von ausgewählten Elementen bei Verwendung von AngularJS ng-Optionen?

StackOverflow https://stackoverflow.com//questions/21002616

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?

War es hilfreich?

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.

http://jsfiddle.net/97LP2/

<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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top