Display particular objects according to button clicks in AngularJS

Question

I think it's something easy for someone that already did it, but I can't figure out how to do it.

I have a webservice that returns a table with many categories, and many articles by categories. It could be something like this:

{u'categories': [
                 {u'articles': [{u'article_id': 3,
                                 u'article_name': u'Tarte au citron',
                                 u'article_price': u'5.50'],
                  u'category_id': 2,
                  u'category_name': u'Desserts'},
                 {u'articles': [{u'article_id': 1,
                                 u'article_name': u'Coca-Cola',
                                 u'article_price': u'2.00'},
                                {u'article_id': 2,
                                 u'article_name': u"Jus d'orange",
                                 u'article_price': u'3.00'],
                  u'category_id': 1,
                  u'category_name': u'Boissons'}]}

In the html template, I have two "sections": One that displays categories, and another one that displays articles.

I'd like to display a button for each category, and when people click on this button, display a button for each articles of the category. Note that the same article can be in many categories

What could be an elegant way to do this? For now, I have $scope.cats_and_arts that contains the whole array.

Thanks for help.

Answer 1

Like this? Or there can be same article in different categories?

<button ng-repeat="cat in cats_and_arts" ng-click="selectedCat = cat.category_id">
    {{cat.category_name}}
</button>

<div ng-repeat ="cat in cats_and_arts">
    <button ng-repeat="article in cat.articles" ng-show="cat.category_id == selectedCat">
    </button>
</div>