AngularJS - 結果配列に含まれていないアイテムがカテゴリに含まれていない場合

私は製品フィルタを作成しており、これは私が持っているものです。AngularJS - 結果配列に含まれていないアイテムがカテゴリに含まれていない場合

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

すべてのカテゴリには、アイテムが含まれた独自の「PRODUCTS」配列があります。私はcategoryとngRepeatを通して（filterQuery経由で）フィルタリングするためにngRepeatを使用しているので、カテゴリ内に商品を表示できます。

質問：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 - 結果配列に含まれていないアイテムがカテゴリに含まれていない場合

答えて

関連する問題