angular.module('todo',[]);
|
angular.module('todo').controller('TodoCtrl',function($scope, todoStorage)
{
$scope.todos = todoStorage.get();
$scope.remove = function(todo)
{
todoStorage.remove(todo);
};
$scope.add = function(newTodoTitle)
{
todoStorage.add(newTodoTitle);
$scope.newTodoTitle="";
};
$scope.update = function()
{
todoStorage.update();
};
});
|
angular.module('todo').directive('todoTitle',function(){
return {
template:'<h1>Todo Title</h1>'
}
});
angular.module('todo').directive('todoItem',function(){
return {
templateUrl:'todoItem.tpl.html'
}
});
angular.module('todo').directive('todoFilters',function(){
return{
templateUrl:'todoFilters.tpl.html'
}
});
angular.module('todo').directive('todoForm',function(){
return{
templateUrl:'todoForm.tpl.html'
}
});
|
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="angularjs@1.6.1" data-semver="1.6.1" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="services.js"></script>
<script src="directive.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="todo" ng-controller="TodoCtrl">
<div class="container">
<!--<h1>Todo list</h1>-->
<todo-title></todo-title>
<todo-form></todo-form>
<!--<pre>{{todoForm | json}}</pre>-->
<p></p>
<div align="center">
<todo-filters></todo-filters>
</div>
<div class="col-lg-6" ng-repeat="todo in todos | filter:statusFilter">
<todo-item></todo-item>
</div>
<!-- /.col-lg-6 -->
</div>
</body>
</html>
|
angular.module('todo').factory('todoStorage',function(){
var TODO_DATA = 'TODO_DATA';
var storage =
{
// todo...
todos : [],
_saveToLocalStorage: function (data)
{
localStorage.setItem(TODO_DATA,JSON.stringify(data));
},
_getFromLocalStorage: function()
{
return JSON.parse(localStorage.getItem(TODO_DATA))||[];
},
get: function()
{
//storage.todos = storage._getFromLocalStorage();
angular.copy(storage._getFromLocalStorage(),storage.todos);
return storage.todos;
},
remove: function(todo)
{
// find todo index in todos
var idx = storage.todos.findIndex(function (item)
{
return item.id === todo.id;
});
// remove from todos
if (idx > -1)
{
storage.todos.splice(idx,1);
storage._saveToLocalStorage(storage.todos);
}
},
add: function(newTodoTitle){
// create new todo
var newTodo=
{
title:newTodoTitle,
completed:false,
createdAt:Date.now()
};
// push into todos
storage.todos.push(newTodo);
storage._saveToLocalStorage(storage.todos);
},
update: function()
{
storage._saveToLocalStorage(storage.todos);
}
}
return storage;
});
|
/* Styles go here */
.input-group .ng-valid.ng-dirty
{
border: solid 1px green;
}
.input-group .ng-invalid.ng-dirty
{
border: solid 1px red;
}
|
<button class="btn btn-primary" ng-click="statusFilter={completed:true}">Completed</button>
<button class="btn btn-primary" ng-click="statusFilter={completed:false}">Active</button>
<button class="btn btn-primary" ng-click="statusFilter={}">All</button>
|
<form name="todoForm" ng-submit="add(newTodoTitle)">
<div class="input-group">
<input type="text" class="form-control" ng-model="newTodoTitle" placeholder="Input new Todo element" autofocus="" minlength="3" />
<span class="input-group-btn">
<button class="btn btn-success" type="submit">Add</button>
</span>
</div>
<div ng-show="todoForm.$dirty && todoForm.$invalid">
<div class="alert alert-warning" role="alert">Required least 3 and more Char.. </div>
</div>
</form>
|
<date>
{{todo.createdAt | date:'yyyy-MM-dd HH:mm:ss'}}
</date>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" ng-model="todo.completed" ng-click="update()">
</span>
<input type="text" class="form-control" ng-model="todo.title" ng-blur="update()">
<span class="input-group-btn">
<button class="btn btn-danger" type="button" ng-click="remove(todo)">Delete</button>
</span>
</div>
|
댓글
댓글 쓰기