Angular resource repeat

angular resource's method will remove the $$hashKey

by ipoly

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-resource.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-mocks.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-animate.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class='panel panel-default' ng-app='myApp' ng-controller='myCtrl'>
    <div class="panel-heading">If 'update' item before 'add new', angular will remove $$hashKey from item,this will cause extra animation.</div>
    <div class=' panel-body'>
        <ul classs='list-unstyled'>
            <li ng-repeat='item in data'> <span class="badge">{{item.$$hashKey}}</span> {{item.title}}
                <button class='btn btn-success' ng-click='update(item)'>update</button>
            </li>
        </ul>
        <button class='btn btn-warning pull-right' ng-click='addNew()'>add new</button>
    </div>
</div>

CSS

body {
    padding: 20px;
}
ul {
    padding:0;
}
li {
    background: skyblue;
    color: #fff;
    margin-bottom: 10px;
    line-height: 180%;
    padding:5px 10px;
}
li.ng-leave, li.ng-enter {
    transition: all .5s ease;
}
li.ng-leave-active {
    opacity:0;
    transform: scale(3);
}
li.ng-enter {
    opacity:0;
    transform: scale(3);
    background: yellow;
}
li.ng-enter-active {
    opacity:1;
    background: skyblue;
    transform: scale(1);
}

JavaScript

angular.module('myApp', ['ngResource', 'ngAnimate'])
    .controller('myCtrl', function ($scope, $resource) {
    Data = $resource('http://angularresourcetest.apiary-mock.com/notes/:id', {
        id: '@id'
    });
    $scope.data = Data.query();

    $scope.update = function (item) {
        console.log(item.id)
        item.$get({
            id: item.id == undefined ? $scope.data.length - 1 : item.id
        });
    }

    $scope.addNew = function () {
        $scope.data.push(new Data({
            title: 'new item' + new Date
        }));
    }

})