AngularJS ng-je répète, virgule séparée par " et " avant le dernier élément

$est le dernier de la truthy valeur.. donc, il contient soit true soit false et il ne contient pas le dernier indice d'élément..

je suppose que ci-dessous expression devrait résoudre votre problème

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

assurez-vous aussi que vous avez l'expression avec $last dans l'élément ng-repeat et pas en dehors de celui-ci

s'il vous Plaît vérifier ci-dessous travail violon

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

Cela pourrait être une des solutions

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

au Lieu d'ajouter quelque chose à ajouter. Vous pouvez utiliser $first omettre le premier. Vous pouvez ensuite utiliser $last ajouter "et" au lieu d'une virgule.

utilisez une virgule avant et pour promouvoir la clarté!

et

sans la virgule de série, la phrase n'indique pas clairement que chacun des utilisateurs doit recevoir une part égale.

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

extrants:

Username1, Username2, Username3, and Username4

si vous avez juste besoin de la sortie de texte, utilisez un filtre personnalisé au lieu de ng-repeat:

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

le code du filtre étant quelque chose comme ceci (en utilisant 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 + ', ';
      }
    });
  };
}

Vous feriez vous sauver la hackish utilisation de $last en dehors de la ng-repeat et les opérateurs ternaires-et ajouter réutilisable pour d'autres parties de votre application.

j'ai rencontré ce problème aujourd'hui, mais avec un défi supplémentaire que les éléments de la liste peuvent avoir besoin d'être formatés dans la phrase (par exemple, éléments en caractères gras ou des liens). Donc sortir une chaîne d'un filtre ne fonctionnerait pas. Au départ, j'ai essayé d'utiliser ng-bind-html et d'extraire HTML du filtre, mais cela n'était pas assez flexible.

j'ai fini par créer une directive qui peut être utilisée dans n'importe quel ng-repeat pour ajouter le séparateur entre les éléments de liste. La partie délicate est que je n'avait accès qu'à $first, $last, et $index (pas au tableau original ou à sa longueur!).

ma solution:

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>

Profitez-en!