隱藏空過濾NG重複

Question

我尋找隱藏的類別，如果它是空的。我目前的解決方案是行不通的：

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做一些事情，但是我沒有做過任何組合工作。

Answer 1

您可以使用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>