Lista de tareas

by Marventus

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- data-ng-app -->
<div ng-app="myExample" ng-controller="myGlobalCtrl">
    <input type="text" id="itemToadd" ng-model="addToVal">
    <input type="button" value="add" ng-click="addToModel()">
    <input id="addAsDone" type="button" value="clear" ng-click="clearAddTo()">
    <label for="asAddDone">
        <input type="checkbox" ng-model="addAsDone">
        <span>Add as done</span>
    </label>
    <h2>{{ titulo }} <strong>({{todos.items.length}})</strong></h2>
    <ul>
        <li ng-repeat="item in todos.items | orderBy: 'done'">
            {{ $index }} - {{ item.action }}
            <input type="checkbox" ng-model="item.done" />
        </li>
    </ul>
</div>

CSS

body {
    padding: 1em;
}
label {
    font-size: 0.9em;
    font-weight: normal;
}

JavaScript

var myExample = angular.module("myExample", []);
// CONTROLADOR
myExample.controller("myGlobalCtrl", ["$scope", function($scope) {
    $scope.titulo = "Lista de tareas";
    $scope.todos = model;
    $scope.addToVal = "Programar";
    $scope.addAsDone = false;
    $scope.addToModel = function() {
        if ($scope.addToVal !== "") {
            $scope.todos.items.push({
                action: $scope.addToVal,
                done: $scope.addAsDone
            });
        } else {
            alert("Please enter a value.")
        }
    };
    $scope.clearAddTo = function() {
        $scope.addToVal = "";
        $scope.addAsDone = false;
    };
}]);

// DATOS - MODELO
var model = {
    user: "Adam",
    items: [{
        action: "Tomar cafe para despertar",
        done: false
    }, {
        action: "Tomar nota",
        done: false
    }, {
        action: "Hacer ejemplo",
        done: true
    }, {
        action: "Smile",
        done: false
    }]
};

/*function globalCtrl($scope){
    $scope.titulo = "Example";
}*/