AngularJS三级联动下拉框子子类别无法填充问题求助

看起来你现在的核心问题是没建立主类别、子类别、子子类别之间的关联逻辑——当前子类别是把所有主类别下的子项混在一起展示，也没有监听选中事件来动态更新下一级选项。下面是修复后的完整代码，我会一步步解释关键改动：

修复后的JavaScript代码 #

var app = angular.module('main', []);
app.controller('DemoCtrl', function($scope) {
    $scope.chooseCategories = [{
        categoryId: 1,
        catName: "men",
        desc: "some description",
        subcat: [{
            key: "topWear",
            value: "m-top-wear",
            subSubCat: [{ key: "Ma", value: "M-A" }, { key: "Mb", value: "M-B" }]
        }, {
            key: "bottomwear",
            value: "m-bottom-wear",
            subSubCat: [{ key: "Ma", value: "M-A" }, { key: "Mb", value: "M-B" }]
        }]
    }, {
        categoryId: 2,
        catName: "women",
        desc: "some description",
        subcat: [{
            key: "topWear",
            value: "w-top-wear",
            subSubCat: [{ key: "Wa", value: "W-A" }, { key: "Wb", value: "w-B" }]
        }, {
            key: "bottomwear",
            value: "w-bottom-wear",
            subSubCat: [{ key: "Ma", value: "M-A" }, { key: "Mb", value: "M-B" }]
        }]
    }, {
        categoryId: 3,
        catName: "kids",
        desc: "some description",
        subcat: [{ key: "topWear", value: "k-top-wear" }, { key: "bottomwear", value: "k-bottom-wear" }]
    }];

    // 初始化默认选中项
    $scope.selectedCountry = $scope.chooseCategories[0].categoryId;
    $scope.subcategories = $scope.chooseCategories[0].subcat;
    $scope.subSubcategories = $scope.subcategories[0].subSubCat || [];

    // 监听主类别变化，同步更新子类别
    $scope.$watch('selectedCountry', function(newVal) {
        if (!newVal) return;
        var selectedMainCat = $scope.chooseCategories.find(cat => cat.categoryId == newVal);
        if (selectedMainCat) {
            $scope.subcategories = selectedMainCat.subcat;
            // 重置子类别选中状态，同时触发子子类别更新
            $scope.selectedsubcategory = $scope.subcategories[0]?.key;
        }
    });

    // 监听子类别变化，同步更新子子类别
    $scope.$watch('selectedsubcategory', function(newVal) {
        if (!newVal || !$scope.subcategories.length) return;
        var selectedSubCat = $scope.subcategories.find(sub => sub.key == newVal);
        if (selectedSubCat) {
            // 处理没有子子类别的情况，避免报错
            $scope.subSubcategories = selectedSubCat.subSubCat || [];
            $scope.selectedsubSubcategory = $scope.subSubcategories[0]?.key;
        }
    });
});

修复后的HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-controller="DemoCtrl" ng-app="main">
    Main category::
    <select ng-model="selectedCountry">
        <option ng-repeat="x in chooseCategories" value="{{x.categoryId}}"> {{x.catName}}</option>
    </select>
    <hr>
    Sub category:: 
    <select ng-model="selectedsubcategory" ng-disabled="!subcategories.length">
        <option ng-repeat="sub in subcategories" value="{{sub.key}}"> {{sub.value}}</option>
    </select>
    <hr>
    Sub sub category::
    <select ng-model="selectedsubSubcategory" ng-disabled="!subSubcategories.length">
        <option ng-repeat="subsub in subSubcategories" value="{{subsub.key}}"> {{subsub.value}}</option>
    </select>
</div>

关键改动说明 #

• 移除冗余的数组拼接：删掉了把所有子类别混在一起的finalArr，改为根据选中的主类别动态获取对应子项
• 添加监听逻辑：用$scope.$watch分别监听主类别和子类别的选中值变化，实时更新下一级选项
• 处理空数据场景：针对没有subSubCat的子类别（比如kids下的子项），默认赋值为空数组，避免页面报错
• 优化用户体验：当下一级没有选项时，自动禁用下拉框，避免无效操作
• 初始化默认值：页面加载时自动设置三级选项的初始值，符合常规交互预期

内容的提问来源于stack exchange，提问作者mayank bisht