Disable ng-options value dynamically

Question

I want to disable select option which is in loop. So far i have implemented in following link. Its working way I wanted but i have made code very long. Is there any other way to implement.

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>

n daniel · Answer 1 · 2016-06-29T13:15:27.820

1

Your method of disabling is very straightforward and common practice. You could use the ngOptions directive instead of the option element, and save a line or two. The amount of the code in the controller has little to do with disabling the 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>

New Controller function:

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

edited Jun 29 '16 at 13:15

answered Jun 29 '16 at 12:55

n daniel

148
1
10

Is that ng-disabled not applied to the select? – Rian O'Dwyer Jun 29 '16 at 13:04
You know, you're right,. I copy/pasted the wrong syntax. There's a disable when syntax. (See more [here](https://github.com/angular/angular.js/pull/11017) Editing original answer. – n daniel Jun 29 '16 at 13:10

score 1 · Accepted Answer · edited May 23 '17 at 11:52

ng-options with disabled rows has some details on how to use ng-options with disabled options.

Based on your current use of the 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 - I simplified it a bit for clarity in demonstration

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

In English:

The $scope.inUse array is maintaining a list of currently selected values. When you change a dropdown value it invokes the call function. That function empties the $scope.inUse array and re-populates it with the currently selected values.

The $scope.isDisabled function returns a boolean on the basis that "If it has an index it is in use and thus disabled"

Thank you. But i dint understand using index in disable function. Please can you help me set default value for select box. Suppose If I am selected Friday and when i click on add next select box should show Monday. I have also added delete button. Even though delete is working I am not able to enable deleted entry for next add. Please help me with this flow. Angular is new to me. — user3335796, Jul 01 '16 at 07:48
Added an explanation of the functions to the answer. If you post a link to your current code I can take a look — Rian O'Dwyer, Jul 01 '16 at 08:48
Thank you. I understood concept. Here is my updated link http://jsfiddle.net/rhz8hxL5/2/ — user3335796, Jul 01 '16 at 09:12
http://jsfiddle.net/5u47mmto/1/ has a working version. Sets the value to the next available (non-selected) color, assuming a recycle to the start of the list if you meet the end. I've also updated the Add button to disable if all options are used. — Rian O'Dwyer, Jul 01 '16 at 10:49

Disable ng-options value dynamically

2 Answers2