web-dev-qa-db-ger.com

Verwenden des Kommas als Listentrennzeichen mit AngularJS

Ich muss eine durch Kommas getrennte Liste mit Elementen erstellen:

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

Laut AngularJS-Dokumentation sind in Ausdrücken keine Steuerflussanweisungen zulässig. Deshalb funktioniert mein {{$last ? '' : ', '}} nicht.

Gibt es eine alternative Möglichkeit, durch Kommas getrennte Listen zu erstellen?

BEARBEITEN 1
gibt es etwas einfacher als:

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

Sie könnten es so machen:

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

..Aber gefällt mir die Antwort von Philipp :-)

332
Andrew Joslin

Verwenden Sie einfach die eingebaute join(separator) - Funktion von Javascript für Arrays:

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

Ebenfalls:

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

Und in der Vorlage:

{{ 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

Sie können CSS auch verwenden, um das Problem zu beheben

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

Aber die Antwort von Andy Joslin ist am besten

Edit: Ich habe es mir anders überlegt, ich musste das erst kürzlich machen und bekam schließlich einen Join-Filter.

10
Chris Stephens

Ich denke, es ist besser, ng-if zu verwenden. ng-show erstellt ein Element in der dom und legt dessen display:none fest. Je mehr dom-Elemente Sie haben, desto ressourcenhungriger wird Ihre App, und auf Geräten mit geringeren Ressourcen sind je weniger dom-Elemente besser.

TBH <span ng-if="!$last">, </span> scheint eine gute Möglichkeit zu sein. Es ist einfach.

5
the7erm

Da diese Frage ziemlich alt ist und AngularJS seitdem Zeit hatte, sich weiterzuentwickeln, kann dies nun leicht erreicht werden mit:

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

Beachten Sie, dass ich ngBind anstelle von Interpolation {{ }} Verwende, da es viel performanter ist: ngBind wird nur ausgeführt, wenn sich der übergebene Wert tatsächlich ändert. Andererseits werden die Klammern {{ }} In jedem $ digest schmutzgeprüft und aktualisiert, auch wenn dies nicht notwendig ist. Quelle: hier , hier und hier .

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>

Letztendlich funktionieren alle Lösungen hier und sind bis heute gültig. Ich bin wirklich begeistert von denen, die CSS einbeziehen, da dies eher ein Präsentationsproblem ist.

2
Cosmin Ababei

Ich mag den Ansatz von Simbu, aber es ist mir nicht angenehm, das erste Kind oder das letzte Kind zu verwenden. Stattdessen ändere ich nur den Inhalt einer sich wiederholenden List-Comma-Klasse.

.list-comma + .list-comma::before {
    content: ', ';
}
<span class="list-comma" ng-repeat="destination in destinations">
    {{destination.name}}
</span>
1
Durrahan

Wenn Sie ng-show verwenden, um die Werte zu begrenzen, funktioniert {{$last ? '' : ', '}} nicht, da alle Werte weiterhin berücksichtigt werden. Beispiel

<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"}
  ]
});

Fügt nach dem "letzten" Wert ein Komma hinzu , da bei ng-show noch alle 4 Werte berücksichtigt werden

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

Eine Lösung ist das Hinzufügen eines Filters direkt in ng-repeat

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

Ergebnisse

{"email":"1"},
{"email":"1"}
0
Mihai