web-dev-qa-db-ja.com

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>
angularjsangularjs-ng-repeat
178
Franck Freiburger

次のようにできます。

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

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

333
Andrew Joslin

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

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

また：

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

そしてテンプレートで：

{{ itemsArray | joinBy:',' }}
97
sanusart
.list-comma::before {
  content: ',';
}
.list-comma:first-child::before {
  content: '';
}
<span class="list-comma" ng-repeat="destination in destinations">
                            {{destination.name}}
                        </span>
39
simbu

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

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

編集：私は最近これをしなければならなかったので気が変わったので、結合フィルターを使用することになりました。

10
Chris Stephens

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

TBH <span ng-if="!$last">, </span>は、それを行うのに最適な方法のようです。それは簡単です。

5
the7erm

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

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

パフォーマンスを向上させるため、補間{{ }}の代わりにngBindを使用していることに注意してください。ngBindは、渡された値が実際に変更された場合にのみ実行されます。一方、ブラケット{{ }}は、不要な場合でも、$ digestごとにダーティチェックされ、更新されます。ソース： here 、 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が関係する人たちには本当に気がつきます。

2
Cosmin Ababei

私はsimbuのアプローチが好きですが、私は最初の子や最後の子を使うのが苦手です。代わりに、繰り返しリストコンマクラスのコンテンツを変更するだけです。

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

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

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"}
0
Mihai