AngularJS:防止在重复多个数组时显示最后一个分隔符 [英] AngularJS: Prevent displaying the last separator when repeating multiple arrays

问题描述

问题:确保每行的最后一个分隔符永远不会显示的最优雅的方法是什么?

Question: What is the most elegant way to ensure the last separator on each line is never shown?

11|18|3|8|12|1|22|31|61|
11:18:3:8:12:1:22:31:
11,18,3,8,12,61,
1 22 31

请注意，数据来自三个不同的数组，例如，第 1 行的数据定义为:

Note that the data originates from three different arrays, e.g., the data for line 1 is defined as:

$scope.numbers = [11,18,3,8,12];
$scope.specialNumbers = [1,22,31];
$scope.additionalNumbers = [61];

我希望看到一种更优雅/更有角度的方式，而不仅仅是找到最后一个

并使用 $element.find 或类似方法删除分隔符.

I would like to see a more elegant/angular way, than just finding the last <li> and remove separator using $element.find, or similar.

我创建了一个 JSFiddle 示例来演示该问题.

I created a little JSFiddle example to demonstrate the problem.

谢谢

推荐答案

这是一个完整的解决方案，使用建议的 $last 检查(仅一次)与 Array.concat，它在 Angular 表达式中受支持，因此支持绑定.但是，要正确重复文字，您还需要track by $index.

Here is a complete solution, using the proposed $last check (only once) in combination with Array.concat, which is supported in Angular expressions and thus supports bindings. However, to correctly repeat literals, you need to moreover track by $index.

"<li ng-repeat='num in numbers.concat(specialNumbers,additionalNumbers) " +
               "track by $index'>" +
    "<span>{{ num }}</span><span ng-if='!$last'>{{ separator }}</span>" + 
"</li>"

这篇关于AngularJS:防止在重复多个数组时显示最后一个分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！