CODEWITHSUNDEEP
javascriptangularjscss
logic-unit
logic-unit

Reputation: 4313

AngularJS ng-repeat, highlight new element

I have an application that polls the server via ajax and adds the json to an ng-repeat.

I'd like to know how I can highlight the latest entry to the list?

<div id="activity-listing" ng-controller="activityListing">
    <ul>
        <li ng-repeat="task in activity track by task.id | orderBy:'task.id':true" class="activity-item">
            <div class="activity-person">{{ task.name }}</div>
            <div class="activity-type">{{ task.activity }}</div>
            <div class="activity-time" am-time-ago="task.time"></div>
            <div class="activity-location">{{ task.location }}</div>
        </li>
    </ul>
</div>

Upvotes: 1

Views: 569

Answers (1)

com2ghz
com2ghz

Reputation: 2876

You can use $last and then apply a CSS animation on it. https://docs.angularjs.org/api/ng/directive/ngRepeat

ng-class="{lastItem: $last}"

<div id="activity-listing" ng-controller="activityListing">
    <ul>
        <li ng-repeat="task in activity track by task.id | orderBy:'task.id':true" class="activity-item" ng-class="{lastItem: $last}">
            <div class="activity-person">{{ task.name }}</div>
            <div class="activity-type">{{ task.activity }}</div>
            <div class="activity-time" am-time-ago="task.time"></div>
            <div class="activity-location">{{ task.location }}</div>
        </li>
    </ul>
</div>

Upvotes: 2

Related Questions