Как скрыть поле выбора, если в нем нет параметров

Question

У меня есть два поля динамического выбора.Первое поле выбора загружается из списка и зависит от того, что вы выбрали, затем заполняет второе поле выбора.

У меня проблема с тем, что я хочу скрыть второе поле выбора, если в нем нет никакой опции, но, похоже, ничего не работает

Я пробовал 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;
    }

Answer 1

Сохраните результаты функции getPrimaryCategories() и используйте ее длину для отображения элемента управления:

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