ng-disabled 在 Angular Chosen 中不起作用

Question

我的项目中有两个 select 框。第一个显示格式，第二个有两个options，即“是”和“否”。我在这两个盒子上都使用了角度选择。

最初，第二个选择框中的“是”选项被禁用。当用户从第一个 select 框中选择“PDF”作为格式时，我想启用 option。

这些是我的选择框

//first  
<select name="exporType" id="exporType" ng-model="interactor.parameters.exporType" ng-options="format for format in formatOptions" ng-change="checkDisable();" chosen>
        <option value=""></option>
</select>

//second
<select name="maskAccountNumber" id="maskAccountNumber" ng-model="interactor.parameters.maskAccountNumber" style="width:145px;" chosen>
    <option value=""></option>
    <option value="N">No</option>
    <option value="Y" ng-disabled="disableoption">Yes</option>
</select>

我在第一个select 框上调用ng-change，这将根据其选择将“是”option（$scope.disableoption）设置为true 或false

函数如下

$scope.checkDisable = function() {

        console.log("Export type is "+$scope.interactor.parameters.exporType);
        if($scope.interactor.parameters.exporType == "PDF")
            $scope.disableoption = false;
        else
            $scope.disableoption = true;
};

问题是，当我从第一个 select 框中选择“PDF”作为选项时，“是”option 不会更新。

如果我从我的select 框中删除chosen，它可以正常工作，但不适用于chosen

EXAMPLE WITH CHOSEN

EXAMPLE WITHOUT CHOSEN

Answer 1

我已多次在此站点上被建议不要使用实际的 <option> 标签来构建带有 Angular 的 <select>，因为你会失去控制器可以拥有的一些动态能力。在下面的解决方案中，我完全控制了控制器中两个选择的状态。按照 Fiddle 进行工作演示。

HTML：

<select name="exporType" id="exporType"
        ng-model="exporType"
        ng-options="format.value as format.name for format in formatOptions"
        ng-change="checkDisable()" style="width:145px;">
</select>

<select name="maskAccountNumber" id="maskAccountNumber"
        ng-model="maskAccountNumber"
        ng-options="mask.value as mask.name disable when mask.disabled for mask in maskOptions"
        ng-change="checkDisable()" style="width:145px;">
</select>

控制器：

function MainController($scope) {
    $scope.disableoption = true;
    $scope.formatOptions = [{value: "BAI", name: "BAI"},
                            {value: "CSV", name: "CSV"},
                            {value: "PDF", name: "PDF"},
                            {value: "QBO", name: "QBO"},
                            {value: "QFX", name: "QFX"},
                            {value: "XLS", name: "XLS"}];

    $scope.maskOptions = [{value: "N", name: "No", disabled: false},
                          {value: "Y", name: "Yes", disabled: true}];

    $scope.exporType = "BAI";
    $scope.maskAccountNumber = "N";

    $scope.checkDisable = function() {
    if ($scope.exporType == "PDF") {
        // show the 'Yes' option for PDF
        $scope.maskOptions[1].disabled = false;
    }
    else {
        // hide the 'Yes' option if not PDF
        $scope.maskOptions[1].disabled = true;

        // change the mask to 'No' when switching to anything
        // other than PDF, since 'Yes' cannot be selected
        $scope.maskAccountNumber = "N";
    }
};

在这里演示

JSFiddle