1

I have a multi select dropdown. What I need to do is when the user lands on the page, I need to restrict him to modify his previous selections, basically disable those options inside dropdown. Here is the html -

<div>
    <select multiple class="form-control selectpicker" ng-model="selectedNames" data-live-search="true" ng-options="opt.name for opt in availableNames track by opt.id" ng-change="onNameChange()"> </select>
</div>

Tried suggestions link - http://silviomoreto.github.io/bootstrap-select/

But if you add an option tag manually when you are using ng-options, it just doesn't get displayed. So tried using ng-repeat rather than ng-options but with ng-repeat my dropdown stopped showing tick-marks against previously selected values & by default displayed - "No values selected", though the model still had them.

Any pointers how to achieve this without resorting to jquery ?

Thanks Anup

Turnip
  • 35,836
  • 15
  • 89
  • 111
adhiran
  • 51
  • 1
  • 6

1 Answers1

0

Use disable when syntax in ngOptions. Refer to the ngOptions docs for more details. Add a key in your ngOptions to indicate if the field was previously selected by user for eg. prevSelected: true and tell ngOptions to disable an option when this key is set/exists.

<select ng-model="myColor" ng-options="color.name disable when color.prevSelected for color in colors"></select>

Example on plnkr

kachhalimbu
  • 2,190
  • 17
  • 14
  • Thanks @kachhalimbu, but unfortunately disable-when is supported only after 1.4 version. We are using 1.3X version. – adhiran May 18 '15 at 06:38
  • I see. Here is a similar thread that you can refer to http://stackoverflow.com/questions/16202254/ng-options-with-disabled-rows – kachhalimbu May 18 '15 at 06:42
  • Yeah, I was working on that only. It worked with it ! Thanks for your help. – adhiran May 18 '15 at 09:58