Item: AngularJS List
Rating: 3.4
Author: 123Fives

0 Downloads
50 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!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)">&times;</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 = [];
  }
  
});

Comments

More from 123Fives

AngularJS List

In this example below you will see how to do a AngularJS List with some HTML / CSS and Javascript

Technologies

Comments

More from 123Fives

Sign Up Test Page

A Pen by Veronica Highsmith

AngularJS List

Basement Brew Test Sign In page

You Might Also Like

jaquez quiz 1

qeelScylla

SURVEY

Sequential promises vs async/await

JavaScript: self-made animation

infografiche-01_animated

Pomodoro Timer

A Pen by Tom