Angular嵌套下拉菜单选择状态管理问题求助

针对你用md-select做带父子分类的多选下拉遇到的状态混乱、联动失效问题，直接按以下步骤改：

一、捋顺数据结构，避免状态分离维护 #

之前你把selections和categoriesForDisplay分开维护，很容易导致数据不一致。直接在接口返回的原数据上扩展selected属性，同时维护一个selectedCategoryIds数组——md-select多选模式绑定数组最稳妥，用ID比绑定对象靠谱，不会出现引用追踪问题。

改后的请求函数：

self.fetchProductSubCategories = function () {
  const endpoint = `${appConfig.restNewWs}/products/product-sub-categories?product_id=${self.product.id}`;
  $http.get(endpoint).then(
    (response) => {
      // 直接处理接口返回的数组，给每个分类/子分类添加selected属性
      self.categories = response.data.map(category => {
        return {
          ...category,
          selected: !!category.selected,
          sub_categories: (category.sub_categories || []).map(sub => ({
            ...sub,
            selected: !!sub.selected
          }))
        };
      });
      
      // 初始化选中ID数组，md-select直接绑定这个数组
      self.selectedCategoryIds = [];
      // 收集初始选中项的ID
      self.categories.forEach(category => {
        if (category.selected) {
          self.selectedCategoryIds.push(category.id);
          // 父类选中时，自动加入所有子类ID
          category.sub_categories.forEach(sub => self.selectedCategoryIds.push(sub.id));
        } else {
          // 父类未选中，但子类单独选中的，单独加入ID
          category.sub_categories.forEach(sub => {
            if (sub.selected) self.selectedCategoryIds.push(sub.id);
          });
        }
      });
    },
    (error) => {
      console.error("Error fetching sub categories:", error);
      commonService.showToast(
        "Error fetching categories and sub categories",
        "error"
      );
    }
  );
};

二、修改模板，绑定ID并添加联动逻辑 #

给md-select绑定selectedCategoryIds数组，每个选项的ng-value用分类ID，同时通过ng-click触发父子联动逻辑：

<md-select
  multiple
  ng-model="productCtrl.selectedCategoryIds"
  md-on-close="productCtrl.clearSearchTerm()"
>
  <md-select-header class="demo-select-header header-container">
    <input
      ng-model="productCtrl.searchTerm"
      type="search"
      placeholder="Search categories and subcategories"
      class="demo-header-searchbox md-text search-input"
      ng-keydown="$event.stopPropagation()"
    />
  </md-select-header>
  <md-optgroup class="categories-container">
    <div ng-repeat="category in productCtrl.categories | filter:productCtrl.searchTerm">
      <!-- 父分类选项，点击触发父子联动 -->
      <md-option 
        ng-value="category.id"
        class="category-name"
        ng-click="productCtrl.toggleParent(category)"
      >
        {{category.name}}
        <!-- 可选：添加选中标识，直观展示状态 -->
        <span ng-if="productCtrl.selectedCategoryIds.includes(category.id)">✓</span>
      </md-option>

      <!-- 子类选项，点击触发父类状态更新 -->
      <div ng-repeat="subCategory in category.sub_categories | filter:productCtrl.searchTerm">
        <md-option
          ng-value="subCategory.id"
          class="subcategory-name"
          ng-click="productCtrl.toggleSub(category, subCategory)"
        >
          {{subCategory.name}}
        </md-option>
      </div>
    </div>
  </md-optgroup>
</md-select>

三、添加联动逻辑函数，维护父子状态同步 #

在控制器里新增两个函数，分别处理父类和子类的选择事件，确保状态一致：

// 点击父分类：选中/取消时同步所有子类状态
self.toggleParent = function(category) {
  const isSelected = self.selectedCategoryIds.includes(category.id);
  if (isSelected) {
    // 取消父类，同时移除所有子类ID
    self.selectedCategoryIds = self.selectedCategoryIds.filter(id => 
      id !== category.id && !category.sub_categories.some(sub => sub.id === id)
    );
    // 更新原数据的selected状态
    category.selected = false;
    category.sub_categories.forEach(sub => sub.selected = false);
  } else {
    // 选中父类，添加父类和所有子类ID
    self.selectedCategoryIds.push(category.id);
    category.sub_categories.forEach(sub => {
      if (!self.selectedCategoryIds.includes(sub.id)) {
        self.selectedCategoryIds.push(sub.id);
      }
    });
    category.selected = true;
    category.sub_categories.forEach(sub => sub.selected = true);
  }
};

// 点击子类：自动更新父类状态（所有子类选中则父类选中，否则取消）
self.toggleSub = function(category, subCategory) {
  const isSelected = self.selectedCategoryIds.includes(subCategory.id);
  if (isSelected) {
    // 取消子类
    self.selectedCategoryIds = self.selectedCategoryIds.filter(id => id !== subCategory.id);
    subCategory.selected = false;
  } else {
    // 选中子类
    self.selectedCategoryIds.push(subCategory.id);
    subCategory.selected = true;
  }
  
  // 检查所有子类是否都选中，更新父类状态
  const allSubsSelected = category.sub_categories.every(sub => sub.selected);
  if (allSubsSelected) {
    // 所有子类选中时，自动选中父类
    if (!self.selectedCategoryIds.includes(category.id)) {
      self.selectedCategoryIds.push(category.id);
    }
    category.selected = true;
  } else {
    // 有子类未选中时，取消父类选中状态
    self.selectedCategoryIds = self.selectedCategoryIds.filter(id => id !== category.id);
    category.selected = false;
  }
};

四、方案核心解决点说明 #

• ng-model绑定问题：用ID数组绑定，避免了对象引用导致的追踪失效，md-select多选模式完全支持数组值。
• 初始选中失效：加载数据时直接把所有选中项的ID塞进selectedCategoryIds，md-select会自动识别并选中对应选项。
• UI不更新：所有状态修改都直接操作selectedCategoryIds和原数据的selected属性，Angular双向绑定会自动同步UI。
• 父子联动：通过自定义ng-click函数手动维护状态，解决了原生md-select没有嵌套联动的缺陷，不会再出现数据混乱。

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