CODEWITHSUNDEEP
angularjsselectng-options
Frontend Friedrich
Frontend Friedrich

Reputation: 151

ng-options disable option but still show it as selected

I want to disable an option in my select but make the model keep the option and show it as selected.

See this 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
}]);

When you disable "black" the model changes to 'null'.

I want it to be not-selectable but still selected. Or re-selected if you enable it again.

Any ideas?

Upvotes: 3

Views: 1065

Answers (3)

Matt
Matt

Reputation: 872

I had a very similar problem, what I ended up doing for the solution was use a toggle function in ng-change to set if that option should be disabled or not (see fiddle). This way the select can be loaded with a disabled option but not selected again after that.

<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/

Upvotes: 0

Frontend Friedrich
Frontend Friedrich

Reputation: 151

I have made a function resetColor() to reset my selected color programmatically after it was temporarily disabled.

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

You can now disable black and it will be set after re-enabling it.

See the working example fiddle: https://jsfiddle.net/U3pVM/29429/

Upvotes: 1

Manikandan Velayutham
Manikandan Velayutham

Reputation: 2228

Use ng-disabled directive in select element.

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

Upvotes: 0

Related Questions