Question

我正在研究产品过滤器，这就是我所拥有的。

$scope.categories = {meat: [array of products], bread: [array of products], drinks: [array of products]}
$scope.filterQuery = '';

每个类别都有自己的“PRODUCTS”数组和项目。我正在使用ngRepeat通过类别和ngRepeat过滤（通过filterQuery），这样我就可以在类别中显示产品。

我的问题是：如果我使用带有ngModel的输入字段来提供产品过滤，如果来自同一产品的产品不在结果数组中，我该如何隐藏类别？

我在组件中的代码：

<div class="component-wrapper" ng-repeat="(key, data) in categories">
CATEGORY
<div class="products" ng-repeat="item in results = (data | filter: filterQuery)">Product</div>

Answer 1

由于您的产品已绑定到results，因此您可以在运行时检查其长度并使用ng-hide="results.length == 0"隐藏其类别

见工作demo

Answer 2

您可以使用ng-if指令（ng-if =“results.length！== 0”）来实现它

请找到示例代码。

<body ng-app="mainApp">

  <div ng-controller="mainCtrl">
    <input type="text" placeholder="search" ng-model="filterQuery"
           >
    <div class="component-wrapper" ng-repeat="(key, data) in categories">
      <span ng-if="results.length !== 0">{{key}}</span>
      <div class="products" ng-repeat="item in results = (data | filter: filterQuery)">{{item}}</div>
    </div>

  <script src="angular.js"></script>
  <script src="app.js"></script>
</body>

awk '{Q=$NF;gsub(/.*\[|\]/,"");$NF="";A[Q]=A[Q]?A[Q] ORS $0:$0;MIN=MIN<Q?(MIN?MIN:Q):Q} END{print A[MIN]}' Input_file

AngularJS - 如果项目来自结果数组中，则隐藏类别

2 个答案: