Question

我正在设计按字母顺序排序的联系人列表。

<li class="btn-default" ng-repeat="user in users | filter:userFilter  | orderBy: 'name'" ng-click="selectUser(user)">
  <div class="userPhoto"><img src="images/users/{{user.photo}}" /></div>
  <div class="userDetails">
    <div class="userName">{{user.name}}</div>
    <div class="userPosition">{{user.cellPhone}}</div>
  </div>
  <span ng-show=" ! $last ">-</span>
</li>

显示

a
a1
b
c
d
.
.
z

我希望这些详细信息显示为

a
a1
----
b
----
c
----
.
.

对于每个字母顺序的开头，我需要一个边框和Top中显示的那个单词的第一个字母。

它将像Android手机联系人列表

Answer 1

您可以将此功能添加到控制器：

$scope.isNewLetter = function(index) {
      if(index+1 == self.data.length)
          return false;
      var x = self.data[index].name[0],
          y = self.data[index+1].name[0];
      return (x!== y);
};

它基本上是这样做的，如果数据列表中下一个人的名字中的第一个字母与当前字母不同，则返回true。

然后调用你的divider元素

<span ng-show="isNewLetter($index)">-</span>

我有working example你可以看看。

Angularjs中的联系人列表分隔符

1 个答案: