AngularJS - ng-disabled不使用选择选择下拉列表

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:

我在角度视图中使用Chosen JQuery插件来显示父/子下拉菜单。实际上我想根据父选择的下拉列表启用子选择的下拉列表。此外,在页面加载时,我通过检查父下拉列值禁用使用ng-disabled的子下拉列表,当用户在父下拉列表中选择一些值时,我需要启用子下拉列表,但它不起作用。请参阅下面的html代码:

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.

注意:当我使用普通的html选择下拉列表时,上面的代码工作正常,我只在选择的子下拉列表中遇到此问题。

3 个解决方案

#1

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

angular中可能不支持ng-disabled,在doc中找不到它

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

#2

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

很可能你在ng-disabled中使用的表达式并没有评估为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.

如果更改父选择以使用ng-change调用函数来修改用于确定是否禁用子选择的变量,则可以使此功能起作用。

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.

这是plnkr上的一个工作示例。

#3

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.

真实的是:当你点击那里时,JQuery Chosen Select会创建动态代码。所以,你在页面中看到的不是选择。如果需要禁用JQuery Chosen Select,则需要使用JQuery编写一些代码。

Here you can see how can you disable JQuery Chosen Select

在这里,您可以看到如何禁用JQuery Chosen Select

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

如果我有一个JQuery背景,我建议你阅读有关Thinking in AnguarJS的内容。

#1