AngularJS NG-powtórzenie, przecinek oddzielony znakiem „i” przed ostatnim elementem

$ last jest wartością zgodną z prawdą, więc zawiera albo prawdę albo fałsz i nie zawiera indeksu ostatniego elementu.
Myślę, że poniższe wyrażenie powinno rozwiązać twój problem

<span ng-repeat="user in Users">

 {{user.Username}} {{$last ? '' : ($index==Users.length-2) ? ' and ' : ', '}}

 </span>

Upewnij się również, że wyrażenie $ last znajduje się wewnątrz elementu ng-repeat, a nie poza nim
Sprawdź poniżej działające skrzypce
http://jsfiddle.net/hrishi1183/Sek8F/2
http://jsfiddle.net/hrishi1183/Sek8F/2/
/

To może być jedno z rozwiązań

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

Zamiast coś dodawać, dodaj to. Możesz użyć

$ first

, aby pominąć pierwszy. Następnie możesz użyć

$ last

, aby dodać „i” zamiast przecinka.

Używaj Commas

i

dla większej przejrzystości!
>Bill Gates przekazuje 6 milionów dolarów na rzecz Nazwa użytkownika1, Nazwa użytkownika2 i Nazwa użytkownika3.

vs

Bill Gates przekazuje 6 milionów na nazwy użytkownika 1, nazwa użytkownika 2 i nazwa użytkownika 3.

Bez sekwencyjnego przecinka we wniosku nie ma jasnego wskazania, że ​​każdemu użytkownikowi należy przyznać równy udział.

<span ng-repeat="user in Users">

 {{user.Username}}{{$last ? '' : ($index==Username.length-2) ? ', and ' : ',&nbsp;'}}

</span>

Wyjścia:

Username1, Username2, Username3, and Username4

Dzisiaj napotkałem ten problem, ale z dodatkowym problemem, że pozycje listy można sformatować w zdaniu (np.

odważne elementy

lub linki). Więc nie będziesz w stanie po prostu wyświetlić ciągu z filtru. Na początku próbowałem użyć ng-bind-html i wyprowadzić HTML z filtra, ale to nie było wystarczająco elastyczne.
W rezultacie stworzyłem dyrektywę, która może być używana w dowolnym ng-powtórzyć, aby dodać separator między elementami listy. Sztuką jest to, że miałem dostęp tylko do pierwszego, ostatniego, ostatniego i $ indeksu (a nie do oryginalnej tablicy ani jej długości!).
Moja decyzja:
<div class="snippet-code">
<div class="snippet" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">

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

 })

 }

 }

})

<pre class="snippet-code-html lang-html prettyprint-override">

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

 <span ng-repeat="item in myArray"><list-separator></list-separator>

 [b]{{item}}[/b]</span>

Cieszyć się!

Jeśli potrzebujesz tylko tekstu, użyj niestandardowego filtra zamiast

ng-repeat

:

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

Kod filtra jest w przybliżeniu (przy użyciu

Lodash
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 + ', ';

 }

 });

 };

}

Oszczędzisz sobie hackerskiego użycia

$ last

poza

ng-repeat

i operatorami trójskładnikowymi - i dodasz możliwość ponownego użycia w innych częściach aplikacji.