AngularJS & jQuery combination

by limeric29

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div ng-controller="TestController">
    <ul>
    	<li ng-repeat="field in Fields" ng-animate-repeat-slide="500">
            <span>{{field.name}}</span> <button ng-click="RemoveItem(field)"> Remove</button>
        </li>    
    </ul>    
    
    <br />
    
    <code style="color: green;">
    	Fields.length: {{Fields.length}}
    </code>
    
    <code>
        {{Fields}}
    </code>
    
    <br />
</div>

CSS

li {
    width: 200px;
    height: 30px;
    border-bottom: 1px solid #eee;
    margin-bottom: 5px;
}

button {
    float: right;
}

JavaScript

var myApp = angular.module('myApp', []);

function TestController($scope) {
    $scope.Fields = [{name: 'One'}, {name: 'Two'}, {name: 'Three'}, {name: 'Four'}, {name: 'Five'}];
    
    $scope.RemoveItem = function (item) {
            var index = $scope.Fields.indexOf(item);
            
		this.destroyElement(function () {
			$scope.Fields.splice(index, 1);
            $scope.$apply();
		});
	}
}

myApp.directive('ngAnimateRepeatSlide', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var duration = parseInt(attrs['ngAnimateRepeatSlide']);
                duration = !isNaN(duration) ? duration : 500;
                jQuery(element).css('display', 'none').slideDown(duration);

                scope.destroyElement = function (onCompleteFn) {
                    
                    jQuery(element).animate({ opacity: 0 }, 200);
                    jQuery(element).slideUp(duration,
                        function () {
                            onCompleteFn.call();
                        }
                    );
                }
            }
        };
});