AngularJS Animated Todo List
How do I make an angularjs animated todo list?
Mobile ready todo list with animations.. What is a angularjs animated todo list? How do you make a angularjs animated todo list? This script and codes were developed by Edward R Haase on 13 January 2023, Friday.
AngularJS Animated Todo List - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS Animated Todo List</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name='viewport' content='width=device-width, initial-scale=1'></meta> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/2.0/animate.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container" ng-cloak="ng-cloak" ng-app="app" ng-controller="MyCtrl"> <H1>Animate.css + AngularJS</H1> <form ng-submit="addItem(newItem)"> <div class="form-group"> <input class="form-control" required="required" type="text" ng-model="newItem" placeholder="New todo item" focus="focus"/> </div> </form> <div class="well" id="list"> <div class="row todo-item" ng-repeat="item in items track by item.id" ng-swipe-right="removeItem($index)"><span class="col-xs-6">{{item.text}}</span><span class="col-xs-3 close" ng-click="removeItem($index)">× </span></div> </div> <button class="btn btn-primary btn-block" ng-click="clearAll()">Remove all items</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-touch.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-animate.js'></script> <script src="js/index.js"></script>
</body>
</html>
AngularJS Animated Todo List - Script Codes CSS Codes
.todo-item.ng-enter { -webkit-animation: fadeInLeft 1s; -moz-animation: fadeInLeft 1s; -ms-animation: fadeInLeft 1s; animation: fadeInLeft 1s;
}
.todo-item.ng-leave { -webkit-animation: fadeOutRight 1s; -moz-animation: fadeOutRight 1s; -ms-animation: fadeOutRight 1s; animation: fadeOutRight 1s;
}
[ng\:cloak], [ng-cloak], .ng-cloak { display: none !important;
}
AngularJS Animated Todo List - Script Codes JS Codes
var app = angular.module('app', ['ngTouch','ngAnimate']);
app.controller('MyCtrl', ['$scope', function($scope) { angular.extend($scope, { counter: 2, items: [ {id:0,text:'first'}, {id:1,text:'second'} ], addItem: function(item) { $scope.items.push({ id:$scope.counter++, text:item }); }, removeItem: function(index) { $scope.items.splice(index, 1); }, clearAll: function() { $scope.items = [] ; } });
}]);
Developer | Edward R Haase |
Username | ehaase |
Uploaded | January 13, 2023 |
Rating | 3 |
Size | 2,975 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Font awesome toggle button with Angular | 2,327 Kb |
OMDB Formatting with Angular | 2,923 Kb |
Ui.bootstrap alert controller demo | 2,440 Kb |
Just another navbar | 2,686 Kb |
Angular Accordian Demo | 2,175 Kb |
CSS only button confirm | 1,840 Kb |
BST in flat array | 2,290 Kb |
OMDB Async Typeahead search with Angular | 2,360 Kb |
Device motion experiment | 3,106 Kb |
Angular google maps | 2,547 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Transition | Shayhowe | 1,632 Kb |
Font stack | Adrianjacob | 1,868 Kb |
Colorful Sliders | Chanrith | 1,246 Kb |
Pricing Table | Semenchenko | 6,784 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
Banner Ad | Raquellorenzana | 4,172 Kb |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!