AngularJS中如何绑定两个下拉框并联动获取子分类数据？

现有如下AngularJS控制器：

app.controller("AllController", function($scope, $http){
    $scope.listSkills = function() {
        $http.get("/showSkills").success(function(skills_from_database){
            $scope.skills = skills_from_database.list;
        })
    }
});

对应的HTML中有两个下拉框，仅第一个能正常工作：

<select name="skill_category" id="skill_category" form="AddSkillForm" onclick="showNewCatInput()">
  <option value="newCat">New category</option>
  <option ng-repeat="category in skills" value="{{category.categoryName}}">{{category.categoryName}}</option>
</select>


<select name="skill_subcategory" id="skill_subcategory" form="AddSkillForm" onclick="showNewSubCatInput()">
  <option value="newSubCat">New subcategory</option>
  <option ng-repeat="subcategory in category.subcategories" value="{{subcategory.subcategoryName}}">{{subcategory.subcategoryName}}</option>
</select>

核心问题：

• 不会用ng-model绑定两个下拉框，实现选中分类后自动加载对应子分类
• 第二个下拉框里的category不是作用域变量，是第一个下拉框ng-repeat的局部变量，导致无法访问子分类

已知遍历所有分类时能正常访问子分类，但现在需要的是选中的单个分类的子分类。

步骤1：用ng-model绑定选中的完整分类对象 #

给第一个下拉框添加ng-model，绑定到作用域变量（比如selectedCategory），同时把option的value替换为ng-value="category"，这样绑定的是整个分类对象，而非仅分类名称，方便后续直接调用其子分类。

步骤2：基于选中分类渲染子分类下拉框 #

第二个下拉框的ng-repeat直接使用selectedCategory.subcategories，同时处理selectedCategory为空的情况（比如页面初始化未选分类时），避免报错。

步骤3：确保初始化加载技能数据 #

在控制器中调用listSkills()方法，保证页面加载时$scope.skills有数据，也可以在HTML中用ng-init触发。

控制器（添加初始化调用） #

app.controller("AllController", function($scope, $http){
    $scope.listSkills = function() {
        $http.get("/showSkills").success(function(skills_from_database){
            $scope.skills = skills_from_database.list;
        })
    }
    // 页面初始化时加载技能数据
    $scope.listSkills();
});

HTML下拉框 #

<select name="skill_category" id="skill_category" form="AddSkillForm" 
        onclick="showNewCatInput()" 
        ng-model="selectedCategory">
  <option value="newCat">New category</option>
  <option ng-repeat="category in skills" ng-value="category">
    {{category.categoryName}}
  </option>
</select>


<select name="skill_subcategory" id="skill_subcategory" form="AddSkillForm" 
        onclick="showNewSubCatInput()"
        ng-disabled="!selectedCategory || selectedCategory === 'newCat'">
  <option value="newSubCat">New subcategory</option>
  <!-- 仅选中有效分类时渲染子分类 -->
  <option ng-if="selectedCategory && selectedCategory !== 'newCat'" 
          ng-repeat="subcategory in selectedCategory.subcategories" 
          value="{{subcategory.subcategoryName}}">
    {{subcategory.subcategoryName}}
  </option>
</select>

补充说明 #

• ng-value="category"确保选中的是完整分类对象，$scope.selectedCategory可直接获取该分类的所有属性（包括subcategories）
• 给第二个下拉框加ng-disabled，在未选中有效分类或选择"New category"时禁用，优化用户体验
• 如果业务需要用分类名称作为表单提交值，可保留第一个下拉框的value="{{category.categoryName}}"，同时在控制器中添加监听逻辑，根据选中名称匹配分类对象：

// 监听分类名称变化，匹配对应分类对象
$scope.$watch('selectedCategoryName', function(newVal) {
  if (newVal && newVal !== 'newCat') {
    $scope.selectedCategory = $scope.skills.find(cat => cat.categoryName === newVal);
  } else {
    $scope.selectedCategory = null;
  }
});

对应的第一个下拉框修改为：

<select name="skill_category" id="skill_category" form="AddSkillForm" 
        onclick="showNewCatInput()" 
        ng-model="selectedCategoryName">
  <option value="newCat">New category</option>
  <option ng-repeat="category in skills" value="{{category.categoryName}}">
    {{category.categoryName}}
  </option>
</select>

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