AngularJS 将人按字母顺序排序并过滤答案

【问题标题】：AngularJS sort People into Alphabetical List and FilterAngularJS 将人按字母顺序排序并过滤
【发布时间】：2015-11-09 10:51:57
【问题描述】：

在 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”时，您会得到这样的结果：

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

如何折叠 B 和 C？这些数据有更好的组织方法吗？

【问题讨论】：

应该可以添加ng-if 并使用数组长度作为值
@charlieftl 你是对的，但是字母的父容器仍然存在并且无法访问子数组长度。我希望也能折叠父级，这样它就不会空了。
请显示数据结构。还展示您如何尝试使用 ng-if 。我不明白为什么它不起作用

标签： angularjs search filter ng-repeat alphabetical

【解决方案1】：

这里的技巧是将过滤后的名称存储在范围变量中，以便您可以进行长度检查以隐藏空结果。

您可以使用以下标记来做到这一点：

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

如果结果为0，则将ng-if="filtered.length > 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>

【讨论】：