Question

以下是我对列表的看法。

<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仅动画新项目。因此新项目需要一个类。我怎样才能用角度来实现这个目标？

Answer 1

这应该动态地将类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>

Answer 2

如果你正在使用Angular 1.1.5，你可以使用ngAnimate enter event而不是精确设计用于这种情况。

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

Answer 3

如果您使用函数添加项目，您还可以设置一个变量，以便在将项目添加到列表时知道最后插入的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，它将所选的类应用于项目
您还可以取消设置lastInsertedId方法

中的delItem()值

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

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

然后

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

使用简单的逻辑并没有太大的改变，但你可以完全拥有一个基于ID，名称和日期的逻辑

玩得开心

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

3 个答案: