AngulaJS アニメーションサンプル２

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<div ng-app="myModule" ng-controller="Controller">
    <button ng-click="add()">add</button>
    <button ng-click="remove()">remove</button>
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>
</div>

JavaScript

angular
.module('myModule', [])
.controller('Controller', function($scope) {
    $scope.items = [1, 2, 3, 4];
    
    $scope.add = function() {
        $scope.items.push($scope.items.length + 1);
    };
    
    $scope.remove = function() {
        $scope.items.pop();
    };
});