Angular - Möglich das neueste Element in ng-repeat zu bekommen

Question

In meiner Angular App habe ich einen Kommentarabschnitt.

Wenn ein neuer Kommentar erstellt wird, möchte ich, dass ein CSS-Stil kurz auf diesen neuen Artikel angewendet wird.

Meine Kommentare stammen von einem $scope Array und werden mit ng-repeat angezeigt.

Ist das möglich, das neueste Element in diesem Array zu erhalten?

Danke.

Answer 1

Für das letzte Element Ihrer ng-repeat wird das Bereichsattribut $last auf true festgelegt. Auf die gleiche Weise wird der erste Artikel $first haben.

Daher können Sie das tun:

<div ng-repeat = "item in collection"> 
    <div ng-class = "{last: $last}">{{item.name}}</div> 
</div> 

Der letzte Punkt der Klasse haben last, die Sie mit CSS stylen können.

Answer 2

Wenn es nur darum geht, eine CSS-Klasse auf den ersten Artikel anzuwenden, warum nicht die CSS :first-child selector verwenden? Dies könnte leicht auf ein DOM-Element mit Kommentaren gesetzt werden. Example:

http://jsfiddle.net/bun75ozq/1/

Controller:

$scope.comment = ''; 
$scope.items = ['a', 'b', 'c']; 

$scope.add = function(){ 
    if ($scope.comment == '') return; 
    $scope.highlightClass = 'container'; 

    // Add new comment to first position 
    $scope.items.splice(0, 0, $scope.comment); 
    // Clear 
    $scope.comment = ''; 
}; 

HTML:

<div> 
    <input type="text" ng-model="comment" /> 
    <button type="button" ng-click="add()">Add comment</button> 
</div> 
<ul ng-class="highlightClass"> 
    <li ng-repeat="item in items"><span ng-bind="item"></span></li> 
</ul> 

CSS:

.container>li:first-child{ 
    color: black; 

    -webkit-animation:highlight ease-in 1; 
    -moz-animation:highlight ease-in 1; 
    animation:highlight ease-in 1; 

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-duration:1s; 
    -moz-animation-duration:1s; 
    animation-duration:1s; 
} 

@-webkit-keyframes highlight { from { color:red; } to { color:black; } } 
@-moz-keyframes highlight { from { color:red; } to { color:black; } } 
@keyframes highlight { from { color:red; } to { color:black; } }