쉼표로 구분 된 항목 목록을 만들어야합니다.
<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:',' }}답변
.list-comma::before {
content: ',';
}
.list-comma:first-child::before {
content: '';
}<span class="list-comma" ng-repeat="destination in destinations">
{{destination.name}}
</span>답변
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와 관련된 사람들에게는 이것이 프레젠테이션 문제에 더 가깝기 때문에 실제로 발견되었습니다.
