1

I am using Chosen JQuery plugin in my angular view to show parent/child dropdowns. Actually I want to enable the child chosen dropdown based on the parent chosen dropdown. Also, on page load I am disabling the child dropdown using ng-disabled by checking parent dropdown value and when the user selects some value in parent dropdown then I need to enable the child dropdown but its not working. Please see the html code below:

Parent Chosen dropdown:

 <select class="input-large chosen-select" ng-model="serviceProvider" data-placeholder="Select Service Provider" ng-options="option as option.name for option in serviceProviders | orderBy:'name'">  <option value=""></option>
</select>

Child Chosen dropdown:

<select class="input-large chosen-select" ng-model="task" data-placeholder="Select Task" ng-options="s.id as s.name for s in tasks | orderBy:'name'" ng-disabled="serviceProvider == undefined">  <option value=""></option>
</select>

Note: When I user normal html select dropdown the above code works fine and I am having this issue only with chosen child dropdown.

user972255
  • 1,828
  • 10
  • 32
  • 52

3 Answers3

3

angular may not support ng-disabled in select, it isn't found in doc

reference: https://docs.angularjs.org/api/ng/directive/select

Vimck
  • 31
  • 2
0

It may well be that the expression you're using in your ng-disabled is not ever evaluating to true.

You can make this functionality work if you change the parent select to use ng-change to call a function to modify a variable used to determine if the child select is disabled.

Parent select: 

<select class="input-large chosen-select" ng-model="serviceProvider" data-placeholder="Select Service Provider" ng-options="provider for provider in providers" ng-change="setChildSelectIsDisabled()">  <option value=""></option>
</select>

Child select:

<select class="input-large chosen-select" ng-model="task" data-placeholder="Select Task" ng-options="task for task in tasks" ng-disabled="childSelectIsDisabled">  <option value=""></option>
</select>

Here is a working example on plnkr.

jleljedal
  • 75
  • 6
  • 1
    Thanks. But its not working for me... I can see the childSelectIsDisabled getting set to false on serviceprovider change but my task dropdown is not getting enabled. Also, it seems like your chosen-select is just rendered as normal html select. – user972255 Nov 14 '14 at 21:48
0

The real thing is: JQuery Chosen Select creates dynamic code when you click there. So, what you see in the Page is not the select. If you need to disable the JQuery Chosen Select, you need to write some code with JQuery.

Here you can see how can you disable JQuery Chosen Select

I recommend you to read about Thinking In AnguarJS if I have a JQuery Background.

Community
  • 1
  • 1
Raphael Abreu
  • 211
  • 2
  • 5