使用逗号作为AngularJS的列表分隔符

Question

我需要创建一个以逗号分隔的项目列表:

  <li ng-repeat="friend in friends">
      <b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>...
  </li>

根据AngularJS文档,表达式中不允许使用控制流语句.这就是我{{$last ? '' : ', '}}无法工作的原因.

是否有另一种创建逗号分隔列表的方法？

编辑1
有一些比以下更简单:

<span ng-show="!$last">, </span>

Answer 1

你可以这样做:

<b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>

..但我喜欢Philipp的回答:-)

Answer 2

只需使用Javascript的内置join(separator)函数进行数组:

<li ng-repeat="friend in friends">
  <b>{{friend.email.join(', ')}}</b>...
</li>

Answer 3

也:

angular.module('App.filters', [])
    .filter('joinBy', function () {
        return function (input,delimiter) {
            return (input || []).join(delimiter || ',');
        };
    });

在模板中:

{{ itemsArray | joinBy:',' }}

Answer 4

.list-comma::before {
  content: ',';
}
.list-comma:first-child::before {
  content: '';
}

<span class="list-comma" ng-repeat="destination in destinations">
                            {{destination.name}}
                        </span>

Answer 5

您也可以使用CSS来修复它

<div class="some-container">
[ <span ng-repeat="something in somethings">{{something}}<span class="list-comma">, </span></span> ]
</div>

.some-container span:last-child .list-comma{
    display: none;
}

但安迪·乔斯林的答案是最好的

编辑:我改变了主意,最近我不得不这样做,最后我选择了一个联接过滤器.

Answer 6

我觉得最好用ng-if.ng-show在中创建一个元素dom并设置它display:none.越多dom的元素,你有更多的资源饥渴您的应用程序变得和在低资源的设备越少dom的元素就更好了.

TBH <span ng-if="!$last">, </span>似乎是一种很好的方式.这很简单.