ng-optionsはオプションを無効にしても選択したまま表示します

Question

私の選択でオプションを無効にしたいが、モデルをオプションにして選択して表示させる。

このフィドルを参照してください：あなたは 'NULL' にモデルチェンジ "黒" を無効にするとhttps://jsfiddle.net/U3pVM/29403/

<div ng-app=selectExample ng-controller="ExampleController"> 

<select ng-model="myColor" 
     ng-options="color.name group by color.shade disable when color.notAnOption for color in colors"> 
</select> 
<button ng-click="colors[0].notAnOption = true"> 
disable black 
</button> 
<button ng-click="colors[0].notAnOption = false"> 
enable black 
</button> 
</div> 

angular.module('selectExample', []) 
.controller('ExampleController', ['$scope', function($scope) { 

$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[0]; // red 
}]); 

を。

私はそれを選択できないまま選択しておきたいと思います。もう一度有効にすると、再選択されます。

アイデア？

Answer 1

select要素でng-disabledディレクティブを使用します。

<select ng-model="myColor" ng-options="color.name group by color.shade disable when color.notAnOption for color in colors" ng-disabled="colors[0].notAnOption"> 
</select> 

<button ng-click="colors[0].notAnOption = true; myColor = null"> 
    disable black 
    </button> 

Answer 2

私は、それが一時的に無効にされた後、プログラムで私の選択した色をリセットする機能resetColor()を行いました。

$scope.resetColor = function() { 
if ($scope.myColor && $scope.saveMyColor){ 
    return; 
    } 
    if ($scope.myColor){ 
    $scope.saveMyColor = $scope.myColor; 
    return; 
    } 
    if ($scope.saveMyColor){ 
    $scope.myColor = $scope.saveMyColor; 
    return; 
} 
} 

これで黒を無効にすることができます。黒を無効にすることができ、再有効にした後で設定されます。

は、実施例のフィドルを参照してください： https://jsfiddle.net/U3pVM/29429/