AngularJS ng重复,通过逗号 'and' 在最后一个元素之前

我有一个项目列表 ...


$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
已邀请:

奔跑吧少年

赞同来自:

$ last是真理价值。因此,它包含真相或谎言,它不包含最后一个元素的索引..

我认为下面给出的表达应该解决你的问题


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


还要确保您有表达式 $last 在元素内 ng-repeat, 而不是在它之外

请在工人下方查看 fiddle

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

喜特乐

赞同来自:

它可以是一个解决方案之一


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

卫东

赞同来自:

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


而不是添加一些东西,添加它。 您可以使用
$first

, 降低第一。 然后你可以使用
$last

添加 "and" 而不是逗号。

风见雨下

赞同来自:

之前使用逗号



为了提高清晰度!

比尔盖茨捐赠 6 百万美元 Username1, Username2 和 Username3.

vs.

比尔盖茨捐赠 6 百万 Username1, Username2 和 Username3.

如果没有一致的分号,则不清楚地指示每个用户应提供相同的份额。


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


输出:


Username1, Username2, Username3, and Username4

二哥

赞同来自:

今天我遇到了这个问题,但还有一个额外的问题,这就是列表元素可以在提议中进行格式化 /例如,

大胆的元素

或链接/. 所以刚从过滤器输出行不起作用。 首先我试图使用 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="[url=http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>]http://ajax.googleapis.com/aja ... gt%3B[/url]
<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>



享受!

小姐请别说爱

赞同来自:

如果您只需要文本输出,请使用自定义过滤器
ng-repeat

:


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


过滤器代码是关于这样的 /使用
https://lodash.com/
/:


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

和三元经营者 - 而且您将添加重复使用应用程序的其他部分的可能性。

要回复问题请先登录注册