Question

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

父选择下拉列表：

 <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>

儿童选择下拉列表：

<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>

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

Answer 1

angular可能不支持在禁用中禁用ng，在doc

中找不到它

参考：https://docs.angularjs.org/api/ng/directive/select

Answer 2

您在ng-disabled中使用的表达式可能永远不会评估为true。

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

家长选择：

<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>

儿童选择：

<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>

这是一个有效的example on plnkr.

Answer 3

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

Here你可以看到如何禁用JQuery Chosen Select

我建议您阅读Thinking In AnguarJS if I have a JQuery Background。

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

3 个答案: