如何使用ng-show和ng-repeat过滤?

时间:2014-04-15 02:08:44

标签: angularjs ng-repeat ng-show

这是我的json(每个对象可以分配到多个类别):

[
 { "title" : "titel1",
   "description" : "description1",
   "data": {
             "categoryList" : [
                                { "categoryName" : "category1" }
                               ]
            }
 },
 { "title" : "titel2",
   "description" : "description2",
   "data": {
             "categoryList" : [
                                { "categoryName" : "category1" }
                               ]
            }
 },
 { "title" : "titel3",
   "description" : "description3",
   "data": {
             "categoryList" : [
                                { "categoryName" : "category2" }
                               ]
            }
 },
 ... and so on
]

div标签显示每个类别的内容。当没有内容分配给某个类别时,我想显示“没有内容可用”的消息。不确定是否有类似的东西 ng-show =“!content。”此类别“。length”可以使用。

<!-- category 1 -->
<div>
  <ul>
    <li ng-repeat="item in content | filter:{'data':'category1'}">
    {{item.title}} - {{item.description}}
    </li>
    <li ng-show="?????">No content available</li> 
  </ul>
</div>

<!-- category 2 -->
<div>
  <ul>
    <li ng-repeat="item in content | filter:{'data':'category2'}">
    {{item.title}} - {{item.description}}
    </li>
    <li ng-show="?????">No content available</li>  
  </ul>
</div>

...

1 个答案:

答案 0 :(得分:1)

您可以在过滤条件中返回save the array,并使用其长度来切换ng-show

<li ng-repeat="item in (filteredContent = (content | filter:{'data':'category1'}))">
...
<li ng-show="filteredContent.length == 0">No content available</li>

在此演示版http://plnkr.co/7kMjojVAkCkTR8XQlunB中,尝试更改过滤器,以便不会匹配任何内容。