Question

我在ng-repeat项目模板上有以下属性...

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

当我通过单击按钮向模型添加新项目时，这非常有用。但我不希望列表首次加载时列表中的第一项是动画。

那么，如果将newItem类应用于第一个元素，当它是一个新添加到模型的元素时，我怎么能这样做？

Answer 1

您可以使用模块ngAnimate 加载时，它不会被初始化，只有在您添加新项目时才会初始化。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

检测第一个数据绑定

1 个答案: