Angular 01 - Basics

This fiddle shows basics of using angular. setting items in scope and modifying items in a collection.

by FrictionlessPulley

HTML

<div ng-app="todo">
    <div ng-controller="viewCtrl">{{Title}}
        <div ng-controller="addCtrl">
            <input type="text" ng-model="item.name" />
            <input type="button" value="add" ng-click="add(item)" />
            <ul>
                <li ng-repeat="currentItem in items">{{currentItem.name}} 
                    <span ng-show="currentItem.complete">
                        (completed on {{currentItem.completedOn | date : 'short'}})
                    </span>
                     <span ng-hide="currentItem.complete">
                         <a href="#complete" ng-click="complete(currentItem)"> mark complete</a>
                    </span>
                </li>
            </ul>
        </div>
    </div>
</div>

JavaScript

var todo = angular.module('todo', []);
todo.controller('viewCtrl', function ($scope) {
    $scope.Title = "To Do List";
});

todo.controller('addCtrl', function ($scope) {
    $scope.items = new Array();
    $scope.item = {};

    $scope.add = function (current) {
        current.complete = false;
        $scope.items.push(current);
        $scope.item = {};
    }

    $scope.complete = function (task) {
        task.complete = true;
        task.completedOn = new Date();

    };
});