JSFiddle

Question

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

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

这些是我的选择框

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

我在第一个ng-change框中调用select，这会将“是”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不会更新。

如果我从chosen框中删除select，则可以正常使用，但不能使用chosen

EXAMPLE WITH CHOSEN

EXAMPLE WITHOUT CHOSEN

Answer 1

我已多次建议本网站使用实际的<option>标签与Angular构建<select>，因为您失去了控制器可以拥有的一些动态功能。在我的解决方案中，我完全控制了来自控制器的两个选择的状态。按照小提琴进行工作演示。

<强> 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";
    }
};

在这里演示

ng-disabled在Angular Chosen中不起作用

1 个答案:

JSFiddle