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 하고 있습니다. 전달 된 값이 실제로 변경 될 때만 실행됩니다. 반면에 괄호 {{ }}는 불필요하더라도 모든 $ 다이제스트에서 더티 검사 및 새로 고침됩니다. 출처 : 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와 관련된 사람들에게는 이것이 프레젠테이션 문제에 더 가깝기 때문에 실제로 발견되었습니다.

나는 simbu의 접근 방식을 좋아하지만 첫 번째 자식이나 마지막 자식을 사용하는 것이 편안하지 않습니다. 대신 반복되는 목록 쉼표 클래스의 내용 만 수정합니다.

.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"},

한 가지 해결책은 필터 를 ng-repeat에 직접 추가하는 것입니다

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

결과

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