如果没有选项,如何隐藏选择字段

时间:2019-07-02 09:14:19

标签: angularjs angular-ng-if ng-hide

我有两个动态选择字段。从列表中加载第一个选择字段,然后根据您选择的内容填充第二个选择字段。

我有一个问题,如果第二选择字段中没有任何选项,但我想隐藏第二选择字段,则我想隐藏它

我尝试过ng-if="caseDetails.Subcategory1.length === 0"(这会隐藏控件,如果有选项,则不会显示任何内容)和ng-if="caseDetails.Subcategory1.length < 1"

主要选择域代码

<select class="form-control ng-pristine ng-valid ng-empty ng-touched" 
        id="exampleFormControlSelect8"
        ng-options="caseType for caseType in caseTypes"
        ng-model="caseDetails.Casetype"
        ng-change="onCaseTypeChanged()">
    <option value="?" selected="selected"></option>
    <option label="option1" value="string:option1">option1</option>
    <option label="option2" value="string:option2">option2</option>
    <option label="option3" value="string:option3">option3</option>
    <option label="option4" value="string:option4">option4</option>
</select>

下面是没有选项但始终加载空白选项的代码。

<select ng-options="subCategory for subCategory in getPrimaryCategories()"
        ng-model="caseDetails.Subcategory1"
        ng-change="onPrimaryCategoryChanged()">
    <option value="?" selected="selected"></option>
</select>

下面是带有选项的代码

<select ng-options="subCategory for subCategory in getPrimaryCategories()" 
        ng-model="caseDetails.Subcategory1"
        ng-change="onPrimaryCategoryChanged()">
    <option value="?" selected="selected"></option>
    <option label="option1" value="string:option1">option1</option>
    <option label="option2" value="string:option2">option2</option>
    <option label="option3" value="string:option3">option3</option>
    <option label="option4" value="string:option4">option4</option>
</select>
    $scope.getPrimaryCategories = function(){
        var matches = [];

        var mappings = $scope.caseTypeMappings;
        for(var i = 0; i < mappings.length; i++){
            var mapping = mappings[i];
            if(mapping.Casetype == $scope.caseDetails.Casetype && mapping.Subcategory1 != null) {
                for(var j = 0; j < mapping.Subcategory1.length; j++){
                    if(mapping.Subcategory1[j] && matches.indexOf(mapping.Subcategory1[j]) < 0) {
                        matches.push(mapping.Subcategory1[j]);
                    }
                }
            }
        }

        return matches;
    }

1 个答案:

答案 0 :(得分:0)

保存getPrimaryCategories()函数的结果,并使用其长度显示控件:

<select ng-options="subcat for subcat in (subcatArr = getPrimaryCategories())"
        ng-show="subcatArr.length"
        ng-model="caseDetails.Subcategory1"
        ng-change="onPrimaryCategoryChanged()">
</select>