[英]Hide Empty Filtered ng-repeat
我想隱藏一個類別,如果它為空。 我當前的解決方案不起作用:
HTML:
<ul>
<li data-ng-repeat="items in shop | unique : 'cat' | orderBy: 'cat'">
<h2>{{items.cat}}</h2>
<ul>
<li ng-repeat="items in shop | filter:{cat: items.cat} | filter:query"
<h3>{{items.name}}</h3>
</li>
</ul>
</li>
</ul>
我的過濾器“唯一”看起來像這樣:
app.filter('unique', function() {
return function(collection, keyname) {
var output = [],
keys = [];
angular.forEach(collection, function(item) {
var key = item[keyname];
if(keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
};
});
JSON:
{
"businesses" : {
"-KQ1ggyrnYGYL1084Htz" : {
"name" : "business name",
"cat" : "food",
},
}
我以為我可以用ng-if和/或ng-hide / show做點什么,但我沒有做過任何組合。
您可以使用ngIf
指令或ngShow
/ ngHide
指令。
如何使用它們取決於您的JSON。
以下是帶有一些基本數據的ngIf
的示例:
(function() { angular.module('MyApp', []); })(); (function() { angular.module('MyApp').controller('MyController', MyController); MyController.$inject = ['$scope']; function MyController($scope) { $scope.shop = [{ name: "test 1", cat: "cat 1" }, { name: "test 2", cat: "cat 3" }, { name: "test 3", cat: "" }, { name: "test 4", cat: "cat 4" }]; } })();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div data-ng-app="MyApp"> <div data-ng-controller="MyController"> <ul> <li data-ng-repeat="items in shop | orderBy: 'cat'" ng-if="items.cat"> <h2>{{items.cat}}</h2> <ul> <li ng-repeat="items in shop | filter:{cat: items.cat}"> <h3>{{items.name}}</h3> </li> </ul> </li> </ul> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.