Skip to content

Instantly share code, notes, and snippets.

@tabekg

tabekg/index.html

Created April 19, 2018 07:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tabekg/e3c9e77a521cf21f604ff8c8dd7c2ee0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tabekg/e3c9e77a521cf21f604ff8c8dd7c2ee0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tabekg created this gist Apr 19, 2018.
    39 changes: 39 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    <!DOCTYPE html>
    <html ng-app="app">
    <head>
    <meta charset="utf-8">
    <title>Simple AngularJS todo list</title>
    <style type="text/css">
    a[ng-click] {
    cursor: pointer;
    color: lime;
    }
    </style>
    </head>
    <body ng-controller="MainCtrl">
    <h1>Simple todo list</h1>

    <h2>Add a task</h2>
    <form ng-submit="addTask()">
    <input type="text" placeholder="New task title" ng-model="newTask" />
    <input type="submit" ng-show="newTask.length" value="Add task">
    </form>

    <div ng-show="tasks.length">
    <h2>Tasks {{ tasks.length }} [<a ng-click="clear()">clear</a>]</h2>
    <ul>
    <li ng-repeat="(index, task) in tasks">{{ task.title }}<span ng-show="!task.completed"> [<a ng-click="completeTask(index)">completed</a>]</span></li>
    </ul>
    </div>

    <div ng-show="completed.length">
    <h2>Completed tasks {{ completed.length }}</h2>
    <ul>
    <li ng-repeat="(index, task) in completed">{{ task.title }} [<a ng-click="removeTask(index)">remove</a>]</li>
    </ul>
    </div>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script type="text/javascript" src="scripts.js"></script>
    </body>
    </html>
    30 changes: 30 additions & 0 deletions scripts.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    var app = angular.module('app', []);

    app.controller('MainCtrl', ['$scope', function($scope){
    $scope.tasks = [];
    $scope.completed = [];
    $scope.newTask = '';

    $scope.addTask = function(){
    if (angular.equals($scope.newTask, '')) return false;
    $scope.tasks.push({
    title: $scope.newTask,
    completed: false
    });
    $scope.newTask = '';
    }

    $scope.removeTask = function(task){
    $scope.completed.splice(task, 1);
    }

    $scope.completeTask = function(task){
    $scope.completed.push($scope.tasks[task]);
    $scope.tasks.splice(task, 1);
    }

    $scope.clear = function(){
    $scope.tasks = [];
    $scope.completed = [];
    }
    }]);