AngularJS 中带有 ng-repeat 的条件内容

Question

我正在尝试建立一个人员列表，每个字母都有分隔线（类似于电话的通讯录）。

people = ['Angela','Annie','Bob','Chris'];

Result:

A
Angela
Annie
B
Bob
C 
Chris

我想用 Angular 做一些类似于这个伪代码的事情：

<div id="container" ng-init="lastCharacter = ''">
   @foreach(person in people)
      @if(firstCharacter(person.name) != lastCharacter)
         <div class="divider-item">{{firstCharacter(person.name)}}</div>
         {{lastCharacter = firstCharacter(person.name)}}
      @endif
      <div class="person-item">{{person.name}}</div>
   @endforeach
</div>

实现此目的最简单的方法是什么？我无法使用 ng-repeat 想出一个优雅的解决方案。

Answer 1

尝试（使用排序列表）

<div id="container" ng-repeat="person in people">
         <div class="divider-item" 
              ng-if="$index == 0 || ($index > 0 && firstCharacter(person.name) != firstCharacter(people[$index-1].name))">{{firstCharacter(person.name)}}</div>

         <div class="person-item">{{person.name}}</div>
</div>

希望，您在作用域中定义了 firstCharacter 函数。或者你可以简单地使用 person.name.charAt(0).

编辑：因为这将包含所有人的 ID 容器。所以最好在容器内使用内部 div 并在容器内使用运行 ng-repeat

<div id="container" >
    <div ng-repeat="person in people">
         <div class="divider-item" 
              ng-if="$index == 0 || ($index > 0 && firstCharacter(person.name) != firstCharacter(people[$index-1].name))">{{firstCharacter(person.name)}}</div>

         <div class="person-item">{{person.name}}</div>
    </div>
</div>

Answer 2

您应该创建自定义过滤器并将分组逻辑移入其中：

app.filter('groupByFirstLetter',function(){
  return function(input){
    var result = [];

    for(var i = 0;i < input.length; i++){
      var currentLetter = input[i][0]

      var current = _.find(result, function(value){
        return value.key == currentLetter;
      });

      if(!current){
        current = {key: currentLetter, items: []}
        result.push(current);
      }

      current.items.push(input[i]);
    }


    return result;
  };
});

然后视图变得简单：

    <div ng-repeat="personGroup in people | groupByFirstLetter">
      <div class="divider-item">{{personGroup.key}}</div>
      <div class="person-item" ng-repeat="person in personGroup.items">
        {{person}}
      </div>
    </div>

这是 plunker 中的一个小例子：http://plnkr.co/edit/W2qnTw0PVgcQWS6VbyM0?p=preview 它正在运行，但会抛出一些异常，你会明白的。

AngularJS 中带有 ng-repeat 的条件内容

Conditional Content with ng-repeat in AngularJS

angularjs

angularjs-ng-repeat