AngularJS List

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

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
Copyright 123Fives ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>AngularJS List</title>
  <link rel='stylesheet prefetch' href=''>
<link rel='stylesheet prefetch' href=''>

      <link rel="stylesheet" href="css/style.css">



  <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/>
      <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>
            <input type="checkbox" ng-model="item.complete" />
            <span ng-bind="item.text">Type more todo tasks</span>
      <button class="btn btn-danger btn-block" ng-click="clearAll()">Clear all items</button>
  <script src=''></script>
<script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
.todo-item {
  transition: background-color 0.3s, color 0.6s;
.todo-item label {
  display: block;
} {
  animation: fadeInLeft 1s;
} {
  animation: bounceOut 1s;
.todo-complete {
  background-color: #f3f3f3;
  color: #777;
.todo-complete label {
  text-decoration: line-through;

/*Downloaded from */
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 = [];