元素中的角度ng-repeat條件包裝項目（ng-repeat組中的過濾器項目）

Question

當某些職業中未找到過濾用戶時，我試圖隱藏職業名稱。

JS：

$scope.contacts = [
    {name: 'John', occupation: 'occupation 1'},
    {name: 'George', occupation: 'occupation 2'},
    {name: 'Jeck', occupation: 'occupation 3'},
    {name: 'Paula', occupation: 'occupation 1'},
    {name: 'Scruath', occupation: 'occupation 3'}
];

HTML：

<input type="text" ng-model="query">
<div ng-repeat="(key, occupation) in contacts | groupBy: 'occupation'">
    <p ng-bind="occupation[0].occupation"></p>
    <div>
        <div ng-repeat="contact in occupation | filter:search">
            <p ng-bind="::contact.fullName"></p>
            <p ng-bind="::contact.email"></p>
        </div>
    </div>
</div>

結果：

職業名稱：“職業1”

• 名稱：“約翰”
• 名稱：“寶拉”

職業名稱：“職業2”

• 名稱：“喬治”

職業名稱：“職業3”

• 名稱：“ Jeck”
• 名稱：“ Scruath”

有什么想法嗎？

Answer 1

您的問題有兩種解決方案：

• 在過濾后的數組上使用ng-show 。
• 使用頂部ng-repeat上的排序。

jsfiddle上的實時示例。

 angular.module('ExampleApp', ['angular.filter']) .controller('ExampleController', function($scope) { $scope.contacts = [{ name: 'John', occupation: 'occupation 1' }, { name: 'George', occupation: 'occupation 2' }, { name: 'Jeck', occupation: 'occupation 3' }, { name: 'Paula', occupation: 'occupation 1' }, { name: 'Scruath', occupation: 'occupation 3' }]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script> <div ng-app="ExampleApp"> <div ng-controller="ExampleController"> <input type="text" ng-model="query"> <h3> Filter with new array filtered </h3> <div ng-repeat="(key,occupation) in contacts| groupBy: 'occupation'" ng-show="filterOccupation.length"> <p ng-bind="key"></p> <div> <div ng-repeat="contact in filterOccupation = (occupation|filter:query)"> <p ng-bind="::contact.name"></p> </div> </div> </div> <h3> Filter with extra filtered </h3> <div ng-repeat="(key,occupation) in contacts|filter:query | groupBy: 'occupation'"> <p ng-bind="key"></p> <div> <div ng-repeat="contact in occupation|filter:query "> <p ng-bind="::contact.name"></p> </div> </div> </div> </div> </div>