我正在尝试建立一个人员列表,每个字母都有分隔线(类似于手机的地址簿)。
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 想出一个优雅的解决方案。
最佳答案
您应该创建一个自定义过滤器并将分组逻辑移至其中:
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;
};
});
然后 View 就变得简单了:
<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 - AngularJS 中使用 ng-repeat 的条件内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27789920/