Here is my json (each object can be assigned to more than one category):
[
{ "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
]
The div tags display the content for each category. I'd like to show the message "No content available", when no content is assigned to a category. No sure if something like ng-show="!content. "this category" .length" would work.
<!-- 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>
...
You can save the array returned by the filter, and use its length to toggle ng-show
:
<li ng-repeat="item in (filteredContent = (content | filter:{'data':'category1'}))">
...
<li ng-show="filteredContent.length == 0">No content available</li>
In this demo http://plnkr.co/7kMjojVAkCkTR8XQlunB , try changing the filter so that nothing is matched.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.