Menu sub-category toggle, search and access single JSON feed

[Nathan Waters]

Hi all

Bit of an Angular noob. Would love some help to get over these little learning curves:

Q #1:

I have a menu listing categories with sub-categories. How do toggle display the sub-categories? Or should I just use jQuery?

      <input class="category-search" ng-model="catquery" placeholder="Search categories...">
      <ul class="category-list">
        <li ng-repeat="category in categories | filter:catquery | orderBy:orderProp">
          <a href="#/categories/{{category.id}}">{{category.name}}</a>
          <ul>
            <li ng-repeat="subcategory in category.subcategories"><a href="#/categories/{{category.id}}">{{subcategory.name}}</a></li>
          </ul>
        </li>
      </ul>

Q #2: 

The menu list above has a search model attached.

Say there was a category like this:

Pets

- Cats

- Dogs

If the user searches for "cats", how would I display all relevant sub-categories (e.g. they would be hidden by default)

Q #3:

The category list, subcategories and related data is all being pulled from a single JSON file.

Is it common practice to load all data from one JSON file or should I segment it?

e.g. suppose the structure is like this:

[
    {
        "id": "pets", 
        "name": "Pets",
        "subcategories": [
            {
                "id": "cats", 
                "name": "Cats",
                "examples": [
                    {
                       "id": "example1", 
                       "name": "Example1"
                    }
            },
            {
                "id": "dogs", 
                "name": "Dogs",
                "examples": [
                     {
                        "id": "example1", 
                        "name": "Example1"
                      }
            }
        ],
        "examples": [
            {
                "id": "example1", 
                "name": "Example1"
            }
        ]
    },
    {....etc....}
]

When a user clicks on the category or subcategory, I want to display all the examples. How would I do this? Or should I alter the JSON source?

Cheers

Nathan 

[Peter Bacon Darwin]

How about some of this, in bold....

Q #1:

I have a menu listing categories with sub-categories. How do toggle display the sub-categories? Or should I just use jQuery?

      <input class="category-search" ng-model="catquery" placeholder="Search categories...">
      <ul class="category-list">

        <li ng-repeat="category in categories | filter:catquery | orderBy:orderProp" ng-click="showChild = !showChild">

          <a href="#/categories/{{category.id}}">{{category.name}}</a>

          <ul ng-show="showChild">

            <li ng-repeat="subcategory in category.subcategories"><a href="#/categories/{{category.id}}">{{subcategory.name}}</a></li>
          </ul>
        </li>
      </ul>

Q #2: 

The menu list above has a search model attached.

Say there was a category like this:

Pets

- Cats

- Dogs

If the user searches for "cats", how would I display all relevant sub-categories (e.g. they would be hidden by default)

You need to do the filtering yourself, either:

  - as a function in a controller, which will create a new object (say filteredCategories) based on a deep search of the categories, then bind your ng-repeat to this filtered list

  - or as a custom filter, which does similar

This is subjective.  It depends on the size and shape of the data, etc.   If it is small I would keep it all together and manage it as a single entity.