AngularJS - 隐藏类别，如果项目从相同的不在结果数组

我正在产品过滤器，这是我有。AngularJS - 隐藏类别，如果项目从相同的不在结果数组

$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>

来源

2017-04-03 Senad Metiljevic

您可以创建一个小提琴/ plunker出来的吗？无法理解'如果我使用ngModel的输入字段来提供产品过滤' – tanmay

@tanmay对不起，如果我不是很清楚，但我找到了解决方案。谢谢你的时间，我真的很感激。 –

既然你已经绑定到results的产品，你可以在运行时检查它的长度和隐藏使用ng-hide="results.length == 0"

见工作demo其类别

来源

2017-04-03 09:47:51 Sajal

这个作品真棒！正是我需要的。 –

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

请找到示例代码。

var myApp = angular.module('mainApp', []); 
 

 
myApp.controller('mainCtrl', function($scope) { 
 
    $scope.categories = { 
 
     'Meat': ['A', 'B', 'C'], 
 
     'Bread': ['D', 'E', 'F'], 
 
     'Drinks': ['G', 'H', 'I'] 
 
    }; 
 

 
    $scope.filterQuery = ''; 
 
});

<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>

来源

2017-04-03 10:53:48

AngularJS - 隐藏类别，如果项目从相同的不在结果数组

回答

相关问题