AngularJSでリスト区切り文字としてコンマを使用する

アイテムのコンマ区切りリストを作成する必要があります。

  <li ng-repeat="friend in friends">
      <b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>...
  </li>

AngularJSのドキュメントによると、式では制御フローステートメントを使用できません。これが私{{$last ? '' : ', '}}が機能しない理由です。

コンマ区切りのリストを作成する別の方法はありますか？

編集1
は、次のものよりも単純なものがあります。

<span ng-show="!$last">, </span>

あなたはこのようにすることができます：

<b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>

..しかし、私はフィリップの答えが好きです:-)

join(separator)配列にはJavaScriptの組み込み関数を使用するだけです。

<li ng-repeat="friend in friends">
  <b>{{friend.email.join(', ')}}</b>...
</li>

また：

angular.module('App.filters', [])
    .filter('joinBy', function () {
        return function (input,delimiter) {
            return (input || []).join(delimiter || ',');
        };
    });

そしてテンプレートでは：

{{ itemsArray | joinBy:',' }}

CSSを使用して修正することもできます

<div class="some-container">
[ <span ng-repeat="something in somethings">{{something}}<span class="list-comma">, </span></span> ]
</div>

.some-container span:last-child .list-comma{
    display: none;
}

しかし、アンディジョスリンの答えは最高です

編集：私は最近これをしなければならなかったという考えを変え、結局結合フィルターを使用することになりました。

使用しng-ifた方がいいと思います。ng-showに要素を作成し、domそれをに設定しdisplay:noneます。dom要素が多ければ多いほど、アプリはリソースを大量に消費し、リソースが少ないデバイスでは少なくなります。dom要素が的です。

TBH <span ng-if="!$last">, </span>はそれを行うための素晴らしい方法のようです。それは簡単です。

この質問はかなり古く、それ以来AngularJSは進化する時間を持っていたので、これを使用して簡単に達成できます。

<li ng-repeat="record in records" ng-bind="record + ($last ? '' : ', ')"></li>。

ngBind補間の代わりに使用していることに注意してください。これは{{ }}パフォーマンスがはるかに高い ngBind ためです。渡された値が実際に変更された場合にのみ実行されます。{{ }}一方、ブラケットは、必要がない場合でも、すべての$ digestでダーティチェックおよび更新されます。出典：こちら、hereおよびhere。

angular
  .module('myApp', [])
  .controller('MyCtrl', ['$scope',
    function($scope) {
      $scope.records = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    }
  ]);

li {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="record in records" ng-bind="record + ($last ? '' : ', ')"></li>
  </ul>
</div>

最後に、ここでのすべてのソリューションが機能し、今日まで有効です。これはプレゼンテーションの問題のほうが多いので、CSSに関係する人には本当に気が付きます。

私はシンブのアプローチが好きですが、ファーストチャイルドやラストチャイルドを使うのは快適ではありません。代わりに、繰り返しリストカンマクラスのコンテンツのみを変更します。

.list-comma + .list-comma::before {
    content: ', ';
}

<span class="list-comma" ng-repeat="destination in destinations">
    {{destination.name}}
</span>

ng-showを使用して値を制限している場合、{{$last ? '' : ', '}}すべての値が考慮されるため、機能しません。

<div ng-repeat="x in records" ng-show="x.email == 1">{{x}}{{$last ? '' : ', '}}</div>

var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
  $scope.records = [
    {"email": "1"},
    {"email": "1"},
    {"email": "2"},
    {"email": "3"}
  ]
});

「最後の」値の後にコンマを追加します。これは、ng-showでは4つの値すべてが考慮されるためです。

{"email":"1"},
{"email":"1"},

1つの解決策は、フィルターをng-repeatに直接追加することです

<div ng-repeat="x in records | filter: { email : '1' } ">{{x}}{{$last ? '' : ', '}}</div>

結果

{"email":"1"},
{"email":"1"}