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 - 隱藏類別，如果項目從相同的不在結果數組

回答

相關問題