检测第一数据绑定

Question

我有一个NG重复项模板以下属性...

ng-class='$first ? "newItem" : ""' 

当我添加一个新的项目，以我的模型与一个按钮，点击这个伟大的工程。但我不希望列表中的第一个项目在页面首次加载时进行动画制作。

所以，我怎么都可以应用的第一个元素的newItem类只当它的一个新添加的元素到模型？

Answer 1

您可以使用模块ngAnimate。
当你加载它没有初始化，并且只有当你添加一个新的项目。

angular.module('App', ['ngAnimate']) 
 
    .controller('MainController', ['$scope', function($scope) { 
 
     $scope.items = [1, 2, 3]; 
 
     $scope.add = function() { 
 
      $scope.items.push($scope.items.length + 1); 
 
     }; 
 
    }]);

.item.ng-enter { 
 
    -webkit-transition: all 1s linear; 
 
    transition: all 1s linear; 
 
} 
 
.item.ng-enter.ng-enter-active { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-animate.js"></script> 
 
<div ng-app="App" ng-controller="MainController"> 
 
    <button ng-click="add()">Add item</button> 
 
    <div class="item" ng-repeat="item in items">{{item}}</div> 
 
</div>