AngularJS - ng-disabled 不能与选择的选择下拉列表一起使用

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 可能不支持在 select 中禁用 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。