Nested dropdown in Angular

Question

I'm having a real hard time working with my task and it's a first time I work with Angular.

I have to show a dropdown with categories and nested sub categories.

The html for it is pretty straight forward, I'm using Angular Material for it.

So my main elements are md-select, input for search and then md-optgroup with two md-options.

I render the list but I have a really hard time figuring out how to manage relationship between child and parent in that hierarchy.

The data I'm receiving is an array of objects and I tried to work with that - but I kept pushing to that array and it became mess every time the selection was updated. Then I transformed that array into object with id and category and sub-category fields.

That also is hard to figure because the ng-model on md-select does not support objects and I don't know how in a efficient way to update my current selection.

I would just really like some help or advice of how to manage those selection so the UI gets updated accordingly.

I tried to use md-checkbox but that ruins my design and how the dropdown should look like. I tried to handle the toggle with ng-click but the UI does not update dynamically.

It's worth to mention that the initially fetched list has some fields as selected marked as true and those have to be reflected in the UI too. I tried ng-selected - but then the UI with ng-click does not work as expected.

Below is some of my code

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>

I would appreciate any advice how I should handle the data here - its my third week working with this and I lost all hope

Thanks!

Answer 1

Your using AngularJs, not Angular. I'll suggest you pass to Angular (AngularJs ends about 6 years). But I imagine you're embracing in an old proyect.

Not, md-select can store an object see the docs. So, as you have an array in the way

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

You can use it

<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>

NOTE: Really I have a little rusty AngularJs and have no test the code