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

$ 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

这可能是解决方案之一

title

Answer 3

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

而不是附加某些内容。您可以使用$first省略第一个。然后，您可以使用$last添加＆＃34;和＆＃34;而不是逗号。

Answer 4

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

Bill Gates向Username1，Username2和Username3捐赠600万。

vs

Bill Gates向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，并为应用程序的其他部分添加可重用性。

Answer 6

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

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

我的解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

享受！

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

6 个答案:

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