<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>AngularJS List</title>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body ng-app="todoTest">
<div ng-controller="TodoCtrl">
<div class="container">
<h1 class="page-header text-center">Angular Todo List</h1>
<form ng-submit="addTodo(newTodo)">
<input type="text" ng-model="newTodo" placeholder="Type new todo item" class="form-control" focus/>
</form>
<br />
<div class="list-group">
<div class="list-group-item todo-item" ng-repeat="item in items" ng-class="{ 'todo-complete': item.complete }">
<span class="close" ng-click="removeTodo($index)">×</span>
<label>
<input type="checkbox" ng-model="item.complete" />
<span ng-bind="item.text">Type more todo tasks</span>
</label>
</div>
</div>
<button class="btn btn-danger btn-block" ng-click="clearAll()">Clear all items</button>
</div>
</div>
</body>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-animate.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/123Fives/angularjs-list-aJMZqa */
.todo-item {
transition: background-color 0.3s, color 0.6s;
}
.todo-item label {
display: block;
}
.todo-item.ng-enter {
animation: fadeInLeft 1s;
}
.todo-item.ng-leave {
animation: bounceOut 1s;
}
.todo-complete {
background-color: #f3f3f3;
color: #777;
}
.todo-complete label {
text-decoration: line-through;
}
/*Downloaded from https://www.codeseek.co/123Fives/angularjs-list-aJMZqa */
var app = angular.module("todoTest", ["ngAnimate"]);
app.controller("TodoCtrl", function($scope) {
$scope.items = [{ text: "This is a sample todo", complete: true }];
$scope.newTodo = "";
$scope.addTodo = function() {
$scope.items.push({ text: $scope.newTodo, complete: false });
$scope.newTodo = "";
};
$scope.removeTodo = function(index) {
$scope.items.splice(index, 1);
}
$scope.clearAll = function() {
$scope.items = [];
}
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
AngularJS
v1.2.0rc1
Twitter Bootstrap
