AngularJS add CSS class on new item in ng-repeat

Question

Here is my view for a list.

<a href="#/">back...</a>
<ul>
    <input type="text" ng-model="search">

    <li ng-repeat="item in items | filter:search | orderBy:'date'">
        {{ item.ID }} - {{ item.heading }} - {{ item.date | date:"dd.MM.yy" }}
        <button ng-click="deleteItem(item.ID)">del</button>
    </li>

    <form>
        <input type="text" ng-model="itemName">
        <input type="date" min="{{ date }}" max="{{ maxDate }}" value="{{ date }}" ng-model="itemDate">
        <button ng-click="addItem()">add</button>
    </form>
</ul>

On click my contoller adds a new item to the view, which works fine. Now i want to animate only the new item with css3. Therefore the new item needs a class. How can i achieve this with angular?

If it is a last member in an array so give a special class may be? — Ivan Chernykh
– Ivan Chernykh, Commented Aug 11, 2013 at 7:44

holographic-principle · Accepted Answer · 2013-08-11 07:58:39Z

3

This should assign class the-class to the last element of the list dynamically:

<li ng-class="{'the-class': $last}" ng-repeat="item in items | filter:search | orderBy:'date'">
    {{ item.ID }} - {{ item.heading }} - {{ item.date | date:"dd.MM.yy" }}
    <button ng-click="deleteItem(item.ID)">del</button>
</li>

answered Aug 11, 2013 at 7:58

holographic-principle

19.7k10 gold badges48 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Low · Accepted Answer · 2013-08-11 09:07:10Z

3

If you're using Angular 1.1.5, you can use ngAnimate enter event instead which is precisely designed for this kind of situation.

Have a look at http://www.nganimate.org/ and http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngAnimate

answered Aug 11, 2013 at 9:07

Michael Low

24.5k17 gold badges85 silver badges119 bronze badges

Comments

DotDotDot · Accepted Answer · 2013-08-11 08:54:37Z

If you use a function to add an Item, you could also set a variable to know which Id is the last inserted while adding the item to the list

First, you can see what I did here http://jsfiddle.net/DotDotDot/Eb2kR/
I just created a lastInsertedId variable, which I use to add a class in the ng-repeat :

<span ng-class='{lastinserted: item.ID==lastInsertedId}'>{{ item.ID }} - {{ item.heading }} - {{ item.date | date:"dd.MM.yy" }}</span>

I had no idea how you implemented you addItem method and what are your IDs, so I created my own method and I assumed your IDs are unique numbers, but it could work with anything (hoping you can find a unique set of data)

$scope.addItem=function(){
        var dd=new Date($scope.itemDate);       
        $scope.items.push( {"ID":$scope.items.length+1, "heading":$scope.itemName, "date":dd.getTime()});
        $scope.lastInsertedId=$scope.items.length;
        }

I change the last inserted id, which will apply the selected class to the item
You could also unset the lastInsertedId value in the delItem() method

If you have a more difficult logic (here I assumed you had unique IDs) you can also use a function in the ng-class. Here, on my example it wouldn't be hard to code :

$scope.amITheOne=function(item){
    return item.ID==$scope.lastInsertedId;
}

then

<span ng-class='{lastinserted: amITheOne(item)}'>

It doesn't change much with a simple logic, but you could totally have a logic based on the ID, the name and the date for example

Have fun

Collectives™ on Stack Overflow

AngularJS add CSS class on new item in ng-repeat

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest