181

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

  <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>
4

9 回答 9

341

你可以这样做：

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

..但我喜欢菲利普的回答:-)

于 2012-07-18T12:16:21.670 回答
231

join(separator)只需对数组使用 Javascript 的内置函数：

<li ng-repeat="friend in friends">
  <b>{{friend.email.join(', ')}}</b>...
</li>
于 2012-07-18T11:49:04.337 回答
101

还：

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

在模板中：

{{ itemsArray | joinBy:',' }}
于 2013-09-12T20:41:34.740 回答
42 

.list-comma::before {
  content: ',';
}
.list-comma:first-child::before {
  content: '';
}
<span class="list-comma" ng-repeat="destination in destinations">
                            {{destination.name}}
                        </span>

于 2015-08-04T09:35:34.417 回答
10

你也可以使用 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;
}

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

编辑：我改变了主意，我最近必须这样做，最后我使用了一个连接过滤器。

于 2014-02-26T16:24:42.603 回答
5

我认为最好使用ng-if. ng-show在 中创建一个元素dom并将其设置为display:none. 您拥有的元素越dom多，您的应用程序就越需要资源，并且在资源较少dom的设备上，元素越少越好。

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

于 2015-10-29T06:58:06.000 回答
3

由于这个问题已经很老了，并且 AngularJS 从那时起有时间发展，现在可以使用以下方法轻松实现：

<li ng-repeat="record in records" ng-bind="record + ($last ? '' : ', ')"></li>.

请注意，我使用ngBind的是插值而不是插值{{ }}，因为它的性能更高： ngBind 只有在传递的值确实发生变化时才会运行。另一方面，括号{{ }}将在每个 $digest 中进行脏检查和刷新，即使没有必要。来源：这里，这里和这里。

angular
  .module('myApp', [])
  .controller('MyCtrl', ['$scope',
    function($scope) {
      $scope.records = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    }
  ]);
li {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="record in records" ng-bind="record + ($last ? '' : ', ')"></li>
  </ul>
</div>

最后一点，这里的所有解决方案都有效并且直到今天仍然有效。我真的发现那些涉及 CSS 的人，因为这更像是一个演示问题。

于 2016-07-23T14:18:51.923 回答
1

我喜欢 simbu 的方法，但我不习惯使用 first-child 或 last-child。相反，我只修改重复列表逗号类的内容。

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

<span class="list-comma" ng-repeat="destination in destinations">
    {{destination.name}}
</span>
于 2018-11-28T03:09:01.787 回答
0

如果您使用 ng-show 来限制值，则{{$last ? '' : ', '}}不会起作用，因为它仍会考虑所有值。示例

<div ng-repeat="x in records" ng-show="x.email == 1">{{x}}{{$last ? '' : ', '}}</div>

var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
  $scope.records = [
    {"email": "1"},
    {"email": "1"},
    {"email": "2"},
    {"email": "3"}
  ]
});

结果在“最后一个”值之后添加逗号，因为使用 ng-show 它仍然考虑所有 4 个值

{"email":"1"},
{"email":"1"},

一种解决方案是将过滤器直接添加到 ng-repeat

<div ng-repeat="x in records | filter: { email : '1' } ">{{x}}{{$last ? '' : ', '}}</div>

结果

{"email":"1"},
{"email":"1"}
于 2016-07-23T13:46:48.893 回答