フィルタリング中に値がない場合、複数のng-repeatのヘッダーを非表示にします

私はangularjsに苦しんでいます！ここに問題がある。私は別の会社の従業員のリストを表示しています。データは、これらのようなものです：フィルタリング中に値がない場合、複数のng-repeatのヘッダーを非表示にします

[ 
    { 
    name : "company1", 
    employees : [ 
     { name : "emp1"}, 
     {...} 
    ] 
    }, 
    { .. } 
]

私は彼らが2 ngのリピートを使用して示しています

<div ng-repeat="company in companies "> 
    <div class="header">{{company.name}}</div> 
    <div ng-repeat="employee in company.employees | filter:search"> 
     {{employee.name}} 
    </div> 
</div>

は、ここでは、私がいない従業員と会社のヘッダをフィルタリング時に、を避けたいです。

は君たちが私より賢く願っています:)

出典

2016-10-06 Carlo Franzelli

<div ng-repeat="company in companies "> 
<div class="header" ng-show="results.length>0"> {{company.name}}</div> 
<div ng-repeat="employee in company.employees | filter:search as results"> 
    {{employee.name}} 
</div>

、について説明：あなたのフィルタリングされたデータをフィルタリングした後がressultsに保存されます、私たちは会社を表示するかどうかを決定するために使用することができます名前または番号

出典

2016-10-06 11:07:41

はデモ私も添付、これを試してみてください。

ng-show="(company.employees | filter:search).length"

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

 

 
app.controller('myctrl', function() { 
 
    var vm = this; 
 
    vm.companies = [{ 
 
    name: "company1", 
 
    employees: [{ 
 
     name: "emp1" 
 
    }, { 
 
     name: "poiuy" 
 
    }, { 
 
     name: "asdf" 
 
    }] 
 
    }, { 
 
    name: "company2", 
 
    employees: [{ 
 
     name: "ghj" 
 
    }, { 
 
     name: "jkl" 
 
    }, { 
 
     name: "ooo" 
 
    }] 
 
    }]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="myctrl as ct"> 
 
    <input ng-model="ct.search"> 
 
    <div ng-repeat="company in ct.companies "> 
 
     <div class="header" ng-show="(company.employees | filter:ct.search).length">{{company.name}}</div> 
 
     <div ng-repeat="employee in company.employees | filter:ct.search"> 
 
     {{employee.name}} 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

出典

2016-10-06 11:01:33 ram1993

フィルタリング中に値がない場合、複数のng-repeatのヘッダーを非表示にします

答えて

関連する問題