隐藏空的已过滤ng-repeat

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>