Skip to content

Instantly share code, notes, and snippets.

@mrtrimble
Created December 1, 2015 23:32
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mrtrimble/456072903be4e7af3f2b to your computer and use it in GitHub Desktop.
Angular To Do List
<div ng-app="myApp">
<h1>To Do List</h1>
<div ng-controller="mainCtrl">
<ul class="main" id="sortable">
<li class="ui-state-default" ng-repeat="todo in todos">
<i class="fa fa-sort sort"></i>
<i class="fa checkbox" ng-class="{'fa-square-o': !checked, 'fa-check-square-o': checked}" ng-click="checked = !checked"></i>
<i class="fa fa-times-circle-o remove" ng-click="removeItem($index)"></i>
<label ng-class="{'checked': checked}" ng-hide="editable" for="name" ng-click="editable = !editable" event-focus="click" event-focus-id="{{todo.name}}{{todo.id}}" ng-bind="todo.name"></label>
<input ng-hide="!editable" ng-blur="editable = false" id="{{todo.name}}{{todo.id}}" rel="name" type="text" ng-model="todo.name" />
</li>
</ul>
<form ng-submit="addTodo(newItem)" >
<label for="addItem">Add Task:</label>
<input rel="addItem" type="text" ng-model="newItem" />
<!--<button ng-click="addTodo(newItem)"><i class="fa fa-plus"></i></button>-->
<input type="submit" id="submit" value="Add" />
</form>
</div>
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>-->
</div>
angular.module("myApp", [])
.factory('focus', function($timeout, $window) {
return function(id) {
// timeout makes sure that is invoked after any other event has been triggered.
// e.g. click events that need to run before the focus or
// inputs elements that are in a disabled state but are enabled when those events
// are triggered.
$timeout(function() {
var element = $window.document.getElementById(id);
if(element)
element.focus();
});
};
})
.directive('eventFocus', function(focus) {
return function(scope, elem, attr) {
elem.on(attr.eventFocus, function() {
focus(attr.eventFocusId);
});
// Removes bound events in the element itself
// when the scope is destroyed
scope.$on('$destroy', function() {
element.off(attr.eventFocus);
});
};
})
.controller("mainCtrl", function($scope){
$scope.todos = [
{"name":"Do laundry", "id":1},
{"name":"Take out trash", "id":2},
{"name":"Pay bills", "id":3},
]
$scope.getRandomSpan = function(){
return Math.floor((Math.random()*6)+1);
}
$scope.addTodo = function(item){
$scope.todos.push({"name": item, "id":$scope.getRandomSpan()});
$scope.newItem="";
}
$scope.removeItem = function(index) {
$scope.todos.splice(index, 1);
};
});
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
body{
background:#333;
color:#FFF;
font-family:"Helvetica", "Arial", sans-serif;
}
.main{
margin-top:25px;
}
div{
position:relative;
top:25px;
width:75%;
margin:0 auto;
h1{
font-size:40px;
text-align:center;
}
}
ul{
border-top:10px solid #2980b9;
}
li,form{
font-size:24px;
color:#2c3e50;
padding:20px;
background:#ecf0f1;
border-top:1px solid #2c3e50;
input{
padding:5px;
font-size:24px;
border:1px solid #2c3e50
}
.checkbox{
font-size:20px;
}
.remove{
float:right;
visibility:hidden;
}
.sort{
visibility:hidden;
}
}li:hover{
.remove, .sort{
visibility:visible;
}
}
form{
label{
font-size:18px;
color:#2c3e50;
display:block;
}
input{
width:80%;
}
input[type="submit"]{
background:#2980b9;
border:1px solid #2c3e50;
border-radius:10px;
width:70px;
color:#FFF;
font-size:24px;
padding:5px;
padding-left:10px;
padding-right:10px;
}
}
.checked{
text-decoration:line-through;
color:#95a5a6;
}
@media screen and (max-width:700px){
div{
width:90%;
input{
width:50%;
}
}
form{
input{
width:75%;
}
}
li .remove{
float:right;
visibility:visible;
}
li .sort{
visibility:visible;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment