Last active
May 6, 2016 19:22
-
-
Save w3cj/d9266d450cce79d18b061642cd0d7917 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="TodoApp"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.css" media="screen" title="no title" charset="utf-8"> | |
| <style media="screen"> | |
| .finished { | |
| text-decoration: line-through; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="page-header"></div> | |
| <div ng-controller="TodoController" class="container"> | |
| <div class="todo" ng-class="{finished:todo.finished}" ng-repeat="todo in vm.todos | orderBy: 'priority'"> | |
| <div ng-click="todo.finished = !todo.finished"> | |
| {{todo.title}} | |
| {{todo.priority}} | |
| </div> | |
| <a ng-click="vm.deleteTodo(todo)" class="btn btn-primary">Delete</a> | |
| <a class="btn btn-info" ng-click="todo.priority = todo.priority + 1">Increase Priority</a> | |
| <a class="btn btn-warning" ng-click="todo.priority = todo.priority - 1">Decrease Priority</a> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" class="form-control" ng-model="vm.newTodo"> | |
| <a ng-click="vm.addTodo()" class="btn btn-info">Add</a> | |
| </div> | |
| </div> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js" charset="utf-8"></script> | |
| <script src="todo.js" charset="utf-8"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // create a module named TodoApp | |
| var TodoApp = angular.module('TodoApp', []); | |
| TodoApp.controller('TodoController', TodoController); | |
| function TodoController($scope) { | |
| $scope.vm = {}; | |
| $scope.vm.todos = [{ | |
| title: 'Learn Angular', | |
| priority: 1, | |
| finished: false | |
| },{ | |
| title: 'Feed the Dog', | |
| priority: 4, | |
| finished: false | |
| },{ | |
| title: 'Do the dishes', | |
| priority: 7, | |
| finished: false | |
| }]; | |
| $scope.vm.addTodo = function() { | |
| $scope.vm.todos.push({ | |
| title: $scope.vm.newTodo, | |
| priority: 10, | |
| finished: false | |
| }); | |
| $scope.vm.newTodo = ''; | |
| } | |
| $scope.vm.deleteTodo = function(todo) { | |
| var index = $scope.vm.todos.indexOf(todo); | |
| // remove from array | |
| $scope.vm.todos.splice(index, 1); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment