Disable ng-Optionen Wert dynamisch

Question

Ich möchte deaktivieren Option, die in Schleife ist. Bisher habe ich im folgenden Link implementiert. Seine Arbeitsweise wollte ich aber ich habe Code sehr lange gemacht. Gibt es eine andere Möglichkeit, dies zu implementieren?

Code Link

<div ng-controller="OptionsController"> 
<button value="add" ng-click="add()"> 
add 
</button> 
<div ng-repeat="val in v"> 
    <select ng-model="val.myColor" ng-change="call(c.name)"> 
     <option ng-repeat="c in colors" ng-disabled="c.shade=='dark'" value="{{c.name}}"> 
      {{c.name}} 
     </option> 
    </select> 

</div> 

</div> 

Answer 1

ng-options with disabled rows hat einige Details, wie ng-Optionen mit behinderten Optionen zu verwenden.

Basierend auf der aktuellen Nutzung des ng-repeat: http://jsfiddle.net/rhz8hxL5/1/

<div ng-controller="OptionsController"> 
    <button value="add" ng-click="add()"> 
    add 
    </button> 
    <div ng-repeat="val in v"> 
    <select ng-model="val.myColor" ng-change="call()"> 
     <option ng-repeat="c in colors" ng-disabled="isDisabled(c)" value="{{c}}"> 
     {{c}} 
     </option> 
    </select> 
    </div> 
</div> 

JS - ich habe es vereinfacht ein wenig für Klarheit in Demonstration

angular.module('myApp', []) 

function OptionsController($scope, $timeout) { 
    $scope.v = [{ 
    myColor: 0 
    }]; 

    $scope.inUse = []; 
    $scope.isDisabled = function(name) { 
    return $scope.inUse.indexOf(name) !== -1; 
    } 

    $scope.colors = ['black', 'white', 'red', 'blue', 'yellow']; 

    $scope.add = function() { 
     $scope.v.push({}); 
    } 

    $scope.call = function() { 
    $scope.inUse = []; 

    for(var i=0; i<$scope.v.length; i++) { 
     var val = $scope.v[i]; 

     $scope.inUse.push(val.myColor); 
    } 
    } 
} 

In Englisch:

Die $scope.inUse Array verwaltet eine Liste der aktuell ausgewählten Werte. Wenn Sie einen Dropdown-Wert ändern, ruft er die Funktion call auf. Diese Funktion leert das Array $scope.inUse und füllt es mit den aktuell ausgewählten Werten erneut auf.

Die $scope.isDisabled Funktion gibt einen boolean auf der Grundlage, dass „Wenn es einen Index hat es in Betrieb ist und somit deaktiviert“

Answer 2

Ihre Methode der Sperrung ist sehr einfach und gängige Praxis. Sie könnten die ngOptions Direktive anstelle des option Elements verwenden und eine oder zwei Zeilen speichern. Die Menge des Codes im Controller hat wenig mit der Deaktivierung der Option zu tun.

Markup:

<select ng-options="c as c.name disable when disableColor(c) for c in colors track by $index" 
    ng-model="val.myColor" ng-change="c.call(c.name)"> 
</select> 

New Reglerfunktion:

$scope.disableColor=function(c){ 
    return c.shade=='dark'; 
}