AngularJS在ng repeat中的新项上添加CSS类

AngularJS add CSS class on new item in ng-repeat

本文关键字：添加 CSS 新项 ng repeat AngularJS      更新时间：2023-09-26

这是我的列表视图。

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

单击后，我的控制器会向视图中添加一个新项目，效果很好。现在我只想用css3为新项目设置动画。因此，新项目需要一个类。我如何用angular实现这一点？

这应该将类the-class动态分配给列表的最后一个元素：

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

如果您使用的是Angular 1.1.5，您可以使用ngAnimate enter事件，它正是为这种情况设计的。

看看http://www.nganimate.org/和http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngAnimate

如果您使用函数添加项目，您还可以设置一个变量，以便在将项目添加到列表时知道最后插入的Id

首先，你可以看到我在这里做了什么http://jsfiddle.net/DotDotDot/Eb2kR/
我刚刚创建了一个lastInsertedId变量，我用它在ng repeat:中添加一个类

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

我不知道你是如何实现addItem方法的，你的ID是什么，所以我创建了自己的方法，我假设你的ID都是唯一的数字，但它可以与任何东西一起使用（希望你能找到一组唯一的数据）

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

我更改了上次插入的id，这将把所选类应用于项目
您也可以在delItem()方法中取消设置lastInsertedId值

如果你有一个更困难的逻辑（这里我假设你有唯一的ID），你也可以在ng-class中使用一个函数。在这里，在我的例子中，编码并不困难：

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

然后

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

简单的逻辑不会改变太多，但你完全可以有一个基于ID、名称和日期的逻辑，例如

玩得开心

相关文章：