根据AngularJS中的按钮单击显示特定对象

Question

我认为对于已经做过的人来说这很容易，但是我不知道该怎么做。

我有一个Web服务，该服务返回一个包含许多类别的表，并且按类别包含许多文章。 可能是这样的：

{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'}]}

在html模板中，我有两个“部分”：一个显示类别，另一个显示文章。

我想为每个类别显示一个按钮，当人们单击该按钮时，为该类别的每个文章显示一个按钮。 请注意，同一篇文章可以分为多个类别

有什么优雅的方法可以做到这一点？ 现在，我有$scope.cats_and_arts包含整个数组。

感谢帮助。

Answer 1

像这样？ 还是在不同类别中可以有同一篇文章？

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