각도와 함께 쉼표를 목록 구분 기호로 사용JS

각도와 함께 쉼표를 목록 구분 기호로 사용JS

쉼표로 구분된 항목 목록을 만들어야 합니다.

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

Angular에 따르면JS 문서, 식에는 제어 흐름 문을 사용할 수 없습니다.이래서 제가{{$last ? '' : ', '}}동작하지 않습니다.

쉼표로 구분된 목록을 만드는 다른 방법이 있습니까?

편집 1
다음과 같은 간단한 것이 있습니까?

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

다음과 같이 할 수 있습니다.

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

하지만 나는 필립의 대답이 좋아:-)

어레이에 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>좋은 방법인 것 같아요.간단해요.

이 질문은 꽤 오래된 질문이고 각진 질문이기 때문에JS는 그 이후로 진화할 시간이 있었습니다. 이제 다음을 사용하여 쉽게 이를 달성할 수 있습니다.

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

사용하고 있는 것에 주의해 주세요.ngBind보간 대신{{ }}퍼포먼스가 대폭 향상되었습니다. ngBind전달된 값이 실제로 변경되었을 때만 실행됩니다.괄호{{ }}한편, 불필요한 경우에도 $140마다 체크 및 갱신이 이루어집니다.출처: 여기, 여기, 그리고 여기.

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

언급URL : https://stackoverflow.com/questions/11540157/using-comma-as-list-separator-with-angularjs