AngularJS ng-repeat，逗号在最后一项之前用“和”分隔

Question

我有一个物品清单...

$scope.Users =[{
    UserName: ''
}];

在我看来，假设我的$scope:Users 中只有 4 个项目，我想这样列出它们

Username1, Username2, Username3 and Username4

<span data-ng-repeat="user in Users">{{user.Username}}</span>{{$last ? '' : ', '}}

上面的表达式基本上会在每一项之后添加逗号，并且可以正常工作。

我的问题是如何在最后一项之前添加一个and 关键字，这样它会像：

Username1, Username2, Username3 and Username4

代替：

Username1, Username2, Username3, Username4

Answer 1

这可能是解决方案之一

<span data-ng-repeat="user in Users">{{user.Username}}<font ng-show="!$last">,</font></span>

Answer 2

我今天遇到了这个问题，但有一个额外的挑战是列表项可能需要在句子中格式化（例如，bold items 或链接）。所以仅仅从过滤器输出一个字符串是行不通的。最初我尝试使用 ng-bind-html 并从过滤器中输出 HTML，但这不够灵活。

我最终制作了一个可以在任何 ng-repeat 中使用的指令，以在列表项之间添加分隔符。棘手的部分是我只能访问 $first、$last 和 $index（不是原始数组或其长度！）。

我的解决方案：

var app = angular.module('app', []);
app.directive('listSeparator', function() {
  return {
    replace: true,
    template: '<span>{{ separator }}</span>',
    link: function(scope, elem, attrs) {
      scope.$watchGroup(["$index", "$first", "$last"], function() {
        if (scope.$first)
          scope.separator = "";
        else if (scope.$last && scope.$index == 1)
          scope.separator = " and ";
        else if (scope.$last)
          scope.separator = ", and ";
        else
          scope.separator = ",";
      })
    }
  }
})

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<div ng-app="app">
    Click a button to see the formatted list.
    <button ng-click="myArray = ['one']">One item</button>
    <button ng-click="myArray = ['one','two']">Two items</button>
    <button ng-click="myArray = ['one','two','three']">Three items</button><br>
    <span ng-repeat="item in myArray"><list-separator></list-separator>
        <strong>{{item}}</strong></span>

</div>

享受吧！

Answer 3

在和之前使用逗号以提高清晰度！

比尔·盖茨向 Username1、Username2 和 Username3 捐赠了 600 万。

对

比尔·盖茨向 Username1、Username2 和 Username3 捐赠了 600 万。

如果没有连续的逗号，这句话并没有清楚地表明每个用户都将获得平等的份额。

<span ng-repeat="user in Users">
     {{user.Username}}{{$last ? '' : ($index==Username.length-2) ? ', and ' : ',&nbsp;'}}
</span>

输出：

Username1, Username2, Username3, and Username4

Answer 4

<span ng-repeat="user in Users">{{$first ? '' : $last ? ' and ' : ', '}}{{user.Username}}</span>

而不是在前面附加一些东西。您可以使用$first 省略第一个。然后，您可以使用$last 添加“和”而不是逗号。

Answer 5

$last 是真值。所以它要么持有真假，要么持有最后一个元素索引。..

我猜下面的表达式应该可以解决你的问题

<p><span ng-repeat="user in Users">
            {{user.Username}} {{$last ? '' : ($index==Users.length-2) ? ' and ' : ', '}}
  </span></p>

还要确保 $last 的表达式在 ng-repeat 元素中，而不是在它之外

请检查下面的工作小提琴

http://jsfiddle.net/hrishi1183/Sek8F/2/

Answer 6

如果您只需要文本输出，请使用自定义过滤器而不是ng-repeat：

<span>{{Users | humanizedUserList}}</span>

过滤器代码是这样的（使用Lodash）：

app.filter('humanizedUserList', function() {
  return function(users) {
    var last_users = _.last(users, 2);
    return _.reduce(users, function(out, user, idx, users) {
      out += user.UserName;

      if(user === last_users[1]) { // last entry
        return out;
      }
      else if(user === last_users[0]) { // second to last entry
        return out + ', and ';
      }
      else {
        return out + ', ';
      }
    });
  };
}

您可以避免在 ng-repeat 和三元运算符之外对 $last 的恶意使用 - 并为应用程序的其他部分添加可重用性。