aLight - Add Some Control

by lega911

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<script src="http://angularlight.org/bin/alight_0.6.min.js"></script>
<div al-app ctrl-todo class="well">
    <h3>ToDo</h3>

    <form class="form-inline" al-submit="append()">
        <input al-value="title" class="input-medium" type="text"/>
        <input class="btn" type="submit" value="Append" />
    </form>

    <ul>
        <li al-repeat="item in list">
            <input type="checkbox" al-checked="item.done" />
            <span al-css="done:item.done">{{item.title}}</span>
            <a href al-click="remove(item)">remove</a>
        </li>
    </ul>

    <p>Total: {{total()}} / {{list.length}}</p>
</div>

CSS

.done {
    color: gray;
    text-decoration: line-through;
}

JavaScript

alight.directives.ctrl.todo = function(element, name, $scope) {
    $scope.list = [
        { title: 'first', done: true },
        { title: 'second', done: false }];

    $scope.append = function() {
        $scope.list.push({ title: $scope.title, done: false });
        $scope.title = '';
    };
    $scope.remove = function(item) {
        var i = $scope.list.indexOf(item);
        $scope.list.splice(i, 1);
    };

    $scope.total = function() {
        var total = 0;
        $.each($scope.list, function(_, item) {
            if(!item.done) total += 1
        });
        return total;
    };
};