AngularJS List

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

Thumbnail
This awesome code was written by 123Fives, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 123Fives ©

Technologies

  • 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