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


179

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

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

5
您始终可以使用CSS以这种方式设置列表格式(然后,当老板希望它们在单独的行上时,您无需修改​​HTML等)-参见stackoverflow.com/questions/1517220/…–
AlexFoxGill

Answers:


337

您可以这样进行:

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

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


不应该($last && '' || ', ')总是屈服', '吗?
13

15
就像上面的okm一样,我无法理解在模板中正确地将$ last评估为true还是false。我使用了:{{{true: '', false: ', '}[$last]}}。此技术比使用方法更灵活,.join因为它允许列表中的每个元素都是数组的成员,例如:<b ng-repeat="friend in friends">{{friend.email}}{{{true: '', false: ', '}[$last]}}</b>
Ryan Marcus

3
更新为使用三元运算符
Andrew Joslin 2013年

1
我如何在打印的数组中插入和插入数组,使数组看起来像这样:John,Mike和Nil。如何在不使用指令的情况下获取此格式。
MaTya 2014年

我正在使用这种方法,因为它允许我对列表中的每个值使用过滤器。
C Fairweather

231

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

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

21
如果您想要使用HTML分隔符,则可能需要使用write 指令。您也可以将HTML放进去join()并禁用HTML转义,但是在地狱中有一个特殊的地方;)
Philipp Reichart 2012年

很好,我什至没有考虑过使用这种方式。
草莓2013年

@DavidKEgghead我希望与众不同jsfiddle.net/wuZRA。它对您不起作用吗?
菲利普·里查特

2
@PhilippReichart对您的延迟表示抱歉。这是一个示例: jsfiddle.net/Sek8F-就像您在我指的是对象的目标字符串一样。
拉维·拉姆

101

也:

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

并在模板中:

{{ itemsArray | joinBy:',' }}

11
该答案显示“成角度的方式”,应标记为最佳。
Eugene Griaznov 2014年

14
为什么不保存六行就做{{ itemsArray.join(', ') }}呢?
Philipp Reichart

12
我不确定用AngularJS重写JavaScript核心功能真的是“ Angular方式” ...
Michael Cole

1
这个答案显示了Angular如何为对象数组增加价值
Michael Cole

41

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


1
这似乎是最“语义”的方式,因为使用逗号分隔列表的选择完全与表示有关。它也可能是一个子列表。
艾略特·卡梅伦

这是我想到的第一个解决方案。不太依赖JavaScript。
Kalpesh Panchal

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;
}

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

编辑:我改变了主意,最近我不得不这样做,最后我得到了一个连接过滤器。


2
我也想使用自定义过滤器,但我喜欢您的想法:)
JBC 2014年

5

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

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


我喜欢这种方法,因为它很简单,但仍支持基于html的分隔符。谢谢@ the7erm!
alexkb '16

2

由于这个问题已经很老了,并且从那时起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的人,因为这更多是一个演示问题。


1

我喜欢simbu的方法,但是我不习惯使用第一个孩子或最后一个孩子。相反,我仅修改重复的列表逗号类的内容。

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

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"}
  ]
});

结果导致在“ last”值之后添加逗号,因为使用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"}

关于如何在不创建自定义管道的情况下以相同的方式在Angular 2中解决此问题的任何建议?
chaenu
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.