2

这是我对列表的看法。

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

4

3 回答 3

3

这应该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>
于 2013-08-11T07:58:39.493 回答
3

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

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

于 2013-08-11T09:07:10.167 回答
2

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

于 2013-08-11T08:54:37.943 回答