AngularJS сортировать людей по алфавитному списку и фильтру

Question

В AngularJS У меня есть объект с ключами, которые являются буквами алфавита, и каждый ключ представляет собой массив людей.

<div ng-repeat="(letter, group) in people"></div> 
    <div ng-repeat="people in letter"></div> 
</div> 

Это, чтобы создать что-то подобное в HTML:

A. Arnold, Avery, Adam, Alex 
B. Bob, Boris 
C. Chris, Connor, Caleb 

Как бы я идти о фильтрации каждого отдельного поля по имени? Например, применяя это.

<div ng-repeat="people in letter | filter:{'name':search.query}"> 

работает нормально, однако, вы получите результат, как это, когда вы набираете «А» в:

A. Arnold, Avery, Adam, Alex 
B. 
C. 

Как я могу свернуть В и С? Есть ли лучший метод организации для этих данных?

Answer 1

Трюк здесь заключается в том, чтобы сохранить отфильтрованные имена в переменной области видимости, чтобы вы могли выполнить проверку длины, чтобы скрыть пустой результат.

Вы можете сделать это с помощью следующей разметке:

<div ng-repeat="people in filtered = (group | filter: search)"></div> 

Затем добавьте ng-if="filtered.length > 0" в тег вы хотите скрыть, если результат равен 0.

Пожалуйста, посмотрите на демо ниже, или в этом jsfiddle.

angular.module('demoApp', []) 
 
.controller('mainController', function($scope) { 
 
    $scope.peoples = { 
 
     A: ['Arnold', 'Avery', 'Adam', 'Alex'], 
 
     B: ['Bob', 'Boris'], 
 
     C: ['Chris', 'Connor', 'Caleb'] 
 
    }; 
 
    
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController"> 
 
    <input ng-model="search" placeholder="enter search string"></input> 
 
<div ng-repeat="(letter, group) in peoples"> 
 
    <strong ng-if="filtered.length > 0">{{letter}}</strong> 
 
    <div ng-repeat="people in filtered = (group | filter: search)">{{people}}</div> 
 
    <br ng-if="filtered.length > 0"/> 
 
</div> 
 
</div>