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

Posted 2023-03-05

【中文标题】在 AngularJS 中使用逗号作为列表分隔符

【英文标题】：Using comma as list separator with AngularJS

【发布时间】：2012-07-17 10:00:09

【问题描述】：

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

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

【问题讨论】：

您始终可以使用 CSS 以这种方式格式化列表（然后当您的老板希望它们在单独的行等时您不需要修改 html） - 请参阅 ***.com/questions/1517220/…

【参考方案1】：

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

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

【讨论】：

如果你想要 HTML 风格的分隔符，可能是时候写 directive 了。您也可以将 HTML 放入 join() 并禁用 HTML 转义，但在地狱中有一个特殊的地方 ;)

很好，我什至没有想过这样使用它。

@DavidKEgghead 我不敢苟同，jsfiddle.net/wuZRA。它怎么不适合你？

@PhilippReichart 抱歉耽搁了。这是一个示例：jsfiddle.net/Sek8F - 看起来您正在定位一个字符串，而我指的是一个对象。

【参考方案2】：

你可以这样做：

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

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

【讨论】：

不应该($last && '' || ', ') 总是让', '？

就像上面的 okm 一样，我无法在模板中正确评估 $last 为真或假。我用这个：true: '', false: ', '[$last]。这种技术比使用.join 更灵活，因为它允许列表中的每个元素都是数组的成员，例如：<b ng-repeat="friend in friends">friend.emailtrue: '', false: ', '[$last]</b>

更新为使用三元运算符

我如何在打印的数组中插入和，以便我的数组看起来像这样：John、Mike 和 Nil。如何在不使用指令的情况下获得这种格式。

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

【参考方案3】：

还有：

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

在模板中：

 itemsArray | joinBy:',' 

【讨论】：

此答案显示“角度方式”，应标记为最佳。

为什么不省下六行，直接做 itemsArray.join(', ') ？

我不确定在 AngularJS 中重写 JavaScript 核心函数是否真的是“Angular 方式”...

This answer 展示了 Angular 如何为对象数组增加价值

【参考方案4】：

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

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

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

【讨论】：

我也会选择自定义过滤器，但我喜欢你的想法 :)

【参考方案5】：

.list-comma::before 
  content: ',';

.list-comma:first-child::before 
  content: '';

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

【讨论】：

这似乎是最“语义化”的方式，因为使用逗号分隔列表的选择完全是关于演示的。它也可以是一个子列表。

这是我想到的第一个解决方案。减少对 JavaScript 的依赖。

【参考方案6】：

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

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

【讨论】：

我喜欢这种方法，因为它很简单并且仍然支持基于 html 的分隔符。谢谢@the7erm！

【参考方案7】：

如果您使用 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"
  ]
);

Results in adding a comma after the "last" value，因为使用 ng-show 它仍然会考虑所有 4 个值

"email":"1",
"email":"1",

One solution is to add a filter直接进入ng-repeat

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

结果

"email":"1",
"email":"1"

【讨论】：

关于如何在 Angular 2 中以相同方式解决此问题而不创建自定义管道的任何建议？

【参考方案8】：

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

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

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

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 的人，因为这更像是一个演示问题。

【参考方案9】：

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

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

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