Question

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

看到这个小提琴：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
}]);

禁用＆＃34;黑色＆＃34;模型更改为＆＃39; null＆＃39;。

我希望它不可选但仍然被选中。如果再次启用，则重新选择。

有什么想法吗？

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

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

查看工作示例小提琴： https://jsfiddle.net/U3pVM/29429/

Answer 2

在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 3

我有一个非常相似的问题，我最终为该解决方案所做的是在ng-change中使用切换功能来设置是否应禁用该选项（请参见小提琴）。这样，可以为选择项加载禁用的选项，但此后不能再次选择。

<select 
  ng-model="myColor"
  ng-change="toggle()"
  ng-options="color.name group by color.shade disable when color.notAnOption for color in colors">
</select>

https://jsfiddle.net/r6n31owp/3/

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

3 个答案: