How to disable option in Angular JS?

Question

I have ng-repeat option:

<option ng-repeat="year in data.dateList.year" value="{{year.id}}" ng-disabled="(year.id < 2015) ?  true : false">

You can see ng-disabled="(year.id < 2015) ? true : false"

Why my option is not disabled if year.id less than 2015?

This is my new code:

<div class="itm" ng-repeat="a in range(num) track by $index">
   <option ng-repeat="year in data.dateList.year" ng-disabled="(year.id) < formData.beginYear[$index]">
      {{year.value}}
   </option>
</div>

You should probably put the `disable` clause in your `ng-repeat` like [the example at the bottom of the docs](https://docs.angularjs.org/api/ng/directive/ngOptions). — Tony, Sep 14 '15 at 17:53

Pankaj Parkar · Accepted Answer · 2015-09-14T19:34:21.997

4

You need to use ng-options here which has way to disable the options

<select ng-model="year"
  ng-options="year.id disable when (year.id < 2015) for year in data.dateList.year">
</select>

Update

For two input field depends each other, you can do it like below. Main problem was while you were doing comparison it was string, as value attributes convert the value to string format. You could use ng-options that does preserves the dataType of the value & will make more easier while making comparison.

Markup

<select ng-model="yr[$index]" 
   ng-options="year.id as year.id for year in years">
</select>

<select ng-model="year" 
   ng-options="year.id disable when (year.id < yr[$index]) for year in years">
</select>

Demo Plunkr

edited Sep 14 '15 at 19:34

answered Sep 14 '15 at 17:54

Pankaj Parkar

134,766
23
234
299

1

upvoted :) and seems like his attempt is working fine though http://plnkr.co/edit/iW8l2zV9DrTXAKTYYDo6?p=preview – Kalhan.Toress Sep 14 '15 at 18:00
For me does not work for `year in data.dateList.year` – Ahmed Sep 14 '15 at 18:03
For `ng-option` it is possible? – Ahmed Sep 14 '15 at 18:12
@Ahmed could you modify this plunkr http://plnkr.co/edit/iW8l2zV9DrTXAKTYYDo6?p=preview with the data you have.. – Pankaj Parkar Sep 14 '15 at 18:13
@Ahmed look at the updated answer..which has plunkr and explaination too..why your code was not working.. – Pankaj Parkar Sep 14 '15 at 19:34
It work fine, but does not work `ng-selected="year.id == 0"`, also instead `value="year.id"` I get `object:338` – Ahmed Sep 14 '15 at 19:58
@Ahmed `object:338` is the way of creating `ng-options`..don't worry about that.. And how come year value would be `0`,,could you provide me the non working plunkr – Pankaj Parkar Sep 14 '15 at 20:23
Okay, but does not work ng-select and string value in list – Ahmed Sep 14 '15 at 20:24
@Ahmed I don't understand what is your need..you are extending a question as m giving an answer.. :( – Pankaj Parkar Sep 14 '15 at 20:25

score 1 · Answer 2 · answered Sep 14 '15 at 17:49

1

ng-disabled is only meant to be use on input elements:

<INPUT
  ng-disabled="expression">
...
</INPUT>

Angular Docs

answered Sep 14 '15 at 17:49

Dalorzo

19,834
7
55
102

score 1 · Answer 3 · answered Sep 14 '15 at 18:01

1

Use this Code

<option ng-repeat="year in data.dateList.year track by $index" ng-disabled="(year.id) < 2015">{{year.id}}</option>

see this code

answered Sep 14 '15 at 18:01

Sandeep

1,461
13
26

What do you mean by Updated Question? – Sandeep Sep 14 '15 at 18:42

How to disable option in Angular JS?

3 Answers3

Linked