AngularJS - jQuey.fadeIn Ex

by gavinfoley

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<body ng-app='app' ng-controller="TodoCtrl">
     <h2>Todo</h2>

    <ul class="unstyled">
        <li data-my-fader="!todo.original" ng-repeat="todo in todos">{{todo.text}}</li>
    </ul>
    <form ng-submit="addTodo()">
        <input type="text" ng-model="todoText" size="30" placeholder="add new todo here"
        />
        <input class="btn-primary" type="submit" value="add" />
    </form>
</body>

</html>

JavaScript

var app = angular.module('app', [])

app.directive('myFader', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.myFader, function (value) {
                if (value) {
                    element.stop().hide();
                    element.fadeIn(1000);
                }
            })
        }

    }
});

function TodoCtrl($scope) {
    $scope.todos = [{
        text: 'learn angular',
        original: true
    }, {
        text: 'build an angular app',
        original: true
    }];

    $scope.addTodo = function () {
        $scope.todos.push({
            text: $scope.todoText
        });
        $scope.todoText = '';
    };
}