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>

隐藏空过滤的ng-repeat

1 个答案: