AngularJS ng-repeat,逗号在最后一项之前用'和'分隔

Question

我有一个项目清单......

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

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

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

$ last是truthy值..所以它保持true或false并且它不包含最后一个元素索引..

我想下面的表达式可以解决你的问题

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

还要确保在ng-repeat元素中包含$ last的表达式,而不是在其外部

请检查以下工作小提琴

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

Answer 2

这可能是解决方案之一

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

Answer 3

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

而不是附加一些东西前置它.您可以使用$first省略第一个.然后,您可以使用$last"和"而不是逗号.

Answer 4

之前使用逗号并提升清晰度!

比尔盖茨向Username1,Username2和Username3捐赠了600万.

VS

比尔盖茨向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 5

如果您只需要文本输出，请使用自定义过滤器而不是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 + ', ';
      }
    });
  };
}

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