การใช้เครื่องหมายจุลภาคเป็นตัวคั่นรายการกับ 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>

.. แต่ฉันชอบคำตอบของ Philipp :-)

เพียงใช้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;
}

แต่คำตอบของ Andy Joslin นั้นดีที่สุด

แก้ไข: ฉันเปลี่ยนใจฉันต้องทำสิ่งนี้เมื่อไม่นานมานี้และฉันก็ลงเอยด้วยฟิลเตอร์เข้าร่วม

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 จะทำงานเฉพาะเมื่อค่าที่ส่งผ่านเปลี่ยนไปจริง ๆ เท่านั้น ในทางกลับกันวงเล็บ{{ }}จะสกปรกมีการตรวจสอบและรีเฟรชในทุก ๆ ดอลลาร์ย่อยแม้ว่าจะไม่จำเป็นก็ตาม ที่มา: ที่นี่ , ที่นี่และที่นี่

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 class ที่ทำซ้ำเท่านั้น

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