angularjs - ng-options 禁用选项但仍将其显示为选中

Question

我想在我的选择中禁用一个选项，但让模型保留该选项并将其显示为选中状态。

请参阅此 fiddle :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

我已经创建了一个函数 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;
 }
}

您现在可以禁用黑色，它会在重新启用后设置。

请参阅工作示例 fiddle : https://jsfiddle.net/U3pVM/29429/