Angular 中的嵌套下拉菜单

Question

我在完成任务时遇到了很大的困难，这是我第一次使用 Angular。

我必须显示一个包含类别和嵌套子类别的下拉菜单。

它的 html 非常简单，我使用 Angular Material。

所以我的主要元素是

md-select

，输入搜索，然后

md-optgroup

和两个

md-options

。

我渲染了列表，但我很难弄清楚如何管理该层次结构中子级和父级之间的关系。

我收到的数据是一个对象数组，我尝试使用它 - 但我一直推送到该数组，每次更新选择时它都会变得混乱。然后我将该数组转换为具有 id 和类别以及子类别字段的对象。

这也很难计算，因为

ng-model

上的

md-select

不支持对象，而且我不知道如何有效地更新我当前的选择。

我真的很想获得一些关于如何管理这些选择的帮助或建议，以便 UI 得到相应更新。

我尝试使用

md-checkbox

但这破坏了我的设计以及下拉菜单的外观。 我尝试使用

ng-click

处理切换，但 UI 不会动态更新。

值得一提的是，最初获取的列表有一些选定的字段标记为 true，这些字段也必须反映在 UI 中。我尝试了

ng-selected

- 但带有

ng-click

的 UI 无法按预期工作。

下面是我的一些代码

self.fetchProductSubCategories = function () {
  const endpoint = `${appConfig.restNewWs}/products/product-sub-categories?product_id=${self.product.id}`;
  $http.get(endpoint).then(
    (response) => {
      const categoriesArray = response.data;
      self.selections = {};
      self.categoriesForDisplay = [];

      categoriesArray.forEach((category) => {
        self.selections[category.id] = {
          id: category.id,
          name: category.name,
          selected: !!category.selected, 
        };

        if (category.sub_categories) {
          category.sub_categories.forEach((subCategory) => {
            self.selections[subCategory.id] = {
              id: subCategory.id,
              name: subCategory.name,
              selected: !!subCategory.selected,
            };
          });
        }

        self.categoriesForDisplay.push({
          ...category,
          sub_categories: category.sub_categories || [],
        });
      });

      console.log("Selections:", self.selections);
      console.log("Categories for Display:", self.categoriesForDisplay);
    },
    (error) => {
      console.error("Error fetching sub categories:", error);
      commonService.showToast(
        "Error fetching categories and sub categories",
        "error"
      );
    }
  );
};

<md-select
  multiple
  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.categoriesForDisplay">
      <md-option ng-value="categoryData" class="category-name">
        {{category.name}}
      </md-option>

      <div ng-repeat="subCategory in category.sub_categories">
        <md-option
          ng-value="subcategory"
          class="subcategory-name"
        >
          {{subCategory.name}}
        </md-option>
      </div>
    </div>
  </md-optgroup>
</md-select>

我将不胜感激任何建议我应该如何处理这里的数据 - 这是我处理这个问题的第三周，我失去了所有希望

谢谢！

Answer 1

您使用的是 AngularJs，不是 Angular。我建议你转向 Angular（AngularJs 大约 6 年结束）。但我想你正在拥抱一个旧项目。

不，md-select 可以存储对象，请参阅文档。所以，当你有一个数组的时候

  {
    name:...
    ....
    sub_categories:[...]
  }

你可以使用它

<md-select ng-model="productCtrl.category"
           ng-model-options="{trackBy: '$value.id'}">
    <md-option ng-value="category" 
             ng-repeat="category in productCtrl.categoriesForDisplay">{{ category.name }}
    </md-option>
</md-select>

<!--see that yu iterate over "productCtrl.category.sub_categories"
    the "ng-model" variable you use in the before md-select-->
<md-select ng-model="productCtrl.subcategory" ng-model-options="{trackBy: '$value.id'}">
    <md-option ng-value="subcategory" 
           ng-repeat="subcategory in productCtrl.category.sub_categories">
          {{ subcategoriy.name }}
    </md-option>
</md-select>

注意：我确实有一点生疏的 AngularJs，并且没有测试代码