Désactiver dynamiquement la valeur ng-options

Question

Je souhaite désactiver l'option de sélection qui est en boucle. Jusqu'à présent, j'ai mis en œuvre dans le lien suivant. Son fonctionnement, je voulais mais j'ai fait du code très longtemps. Y a-t-il un autre moyen de mettre en œuvre?

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 a quelques détails sur la façon d'utiliser les options ng-avec options désactivées.

En fonction de votre utilisation actuelle du 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 - Je simplifié un peu de clarté dans la démonstration

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); 
    } 
    } 
} 

En anglais:

Le $scope.inUse array maintient une liste des valeurs actuellement sélectionnées. Lorsque vous modifiez une valeur de liste déroulante, elle appelle la fonction call. Cette fonction vide le tableau $scope.inUse et le renseigne à nouveau avec les valeurs actuellement sélectionnées.

La fonction $scope.isDisabled retourne un booléen sur la base que « Si elle a un indice, il est en cours d'utilisation et donc désactivé » lien

Answer 2

Votre méthode de désactivation est très simple et pratique courante. Vous pouvez utiliser la directive ngOptions au lieu de l'élément option et enregistrer une ligne ou deux. La quantité de code dans le contrôleur a peu à voir avec la désactivation de l'option.

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> 

Nouvelle fonction Contrôleur:

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