2

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

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

这些是我的选择框

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

选择的示例

未选择的示例

4

1 回答 1

0

我在这个网站上多次被建议不要使用实际<option>标签来构建一个<select>Angular，因为你失去了控制器可以拥有的一些动态能力。在下面的解决方案中，我完全控制了控制器中两个选择的状态。按照 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

于 2016-09-08T07:51:57.377 回答