JSFiddle - React, Tailwind, and code Playground

by dj_straycat

HTML

<script src="http://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.js"></script>
<div ng-controller="Main">

<div ng-repeat="item in test" fadey="test" id="item-holder-{{$index}}">
    <input ng-model="item.name" />
    <button ng-click="remove($index)">Remove</button>
</div>
    
<button ng-click="add()">Add</button>
    <pre ng-bind="test|json"></pre>

JavaScript

angular.module('fadey', []).directive('fadey', function() {
    return {
        restrict: 'A',
        scope: { fadey : 'accessor' },
        link:  function($scope, elm, attr) {
            var install = function() {
                var item = $scope.fadey();
                item.remove = removeFN;
            }
                
            $scope.watch(attr.fadey, $scope.install );
            console.log($scope, elm, attr);
        }
    }
});



function Main($scope, $defer) {
    $scope.test= [ { name: 'Hello' }, { name: 'Hello' } ]
    
        $scope.add = function() { 
            $scope.test.push({ name: 'New ' 
                + $scope.test.length });
        }

        $scope.remove = function(i) {
            var item = $scope.test[i],
                holder = $('#item-holder-'+i);
            holder.animate({opacity: 0}, 300);
            
            $defer(function() {
                holder.animate({height: 0}, 200, function() {
                    
                    $scope.test.splice($scope.test.indexOf(item), 1);
                    $scope.$apply();
                })
            }, 500)
        }

    }