davidmaogomezz/AngularJS: realtime multiuser TODO list with Firebase.markdown

## AngularJS: realtime multiuser TODO list with Firebase.markdown

      
    Raw
  

              AngularJS: realtime multiuser TODO list with Firebase.markdown
            
          
    AngularJS: realtime multiuser TODO list with Firebase

A Pen by Fabio Biondi on CodePen.
License.

  
## index.html
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>


<body ng-controller="DemoCtrl" class="container"  ng-app="DemoApp">

<h2>Realtime ToDo list with AngularJS and AngularFire</h2>
<h4>Try it opening two browsers and adding / removing a TODO</h4>


 <!--ADD ITEM FORM-->
 <form name="myForm">

     <div>
         <input type="text"
                name="todoNameField"
                ng-model="todoName"
                placeholder="Add new task (min 3 chars)"
                required ng-minlength="3"
                class="form-control"
                ng-keyup="($event.keyCode == 13 && todoName.length > 2) ? addItem() : return"
                style="margin-bottom: 10px"
                />

         <button ng-click="addItem()"
                         ng-hide="myForm.todoNameField.$invalid"
                         class="btn btn-primary" type="button"
                         >Save Todo</button>
     </div>

 </form>

<hr>


<!--TODO LIST-->
<div ng-repeat="item in todos" class=" list-group-item row">

    <div  class="col-md-6">
        <!--COMPLETED ICON-->
         <span class="glyphicon glyphicon-thumbs-up"
               ng-show="item.completed"> </span>


        <!--todo label-->
        <span>{{item.name}} </span>

        <small  class="text-warning"> [ {{item.id}} ]</small>
    </div>


    <div  class="col-md-6">
        <!--Delete Todo button-->
        <a class="btn btn-danger" ng-click="removeItem($index, item, $event)">
            <i class="icon-remove-sign"></i>Delete
        </a>

        <a class="btn btn-warning" ng-click="changeStatus(item)">
            <i class="icon-remove-sign"></i>Change Status
        </a>
    </div>


</div>


## script.js
var myApp = angular.module('DemoApp', ['firebase']);

myApp.constant("FIREBASE_URL", "https://codepen-public.firebaseio.com/firebase1demo/codepen/" )


function DemoCtrl($scope, $firebase, FIREBASE_URL) {

    // Get Stored TODOs
    var todosRef = new Firebase(FIREBASE_URL);
    $scope.todos = $firebase(todosRef);


    // Update the "completed" status
    $scope.changeStatus   = function (item) {

        // Get the Firebase reference of the item
        var itemRef = new  Firebase(FIREBASE_URL + item.id);

        // Firebase : Update the item
        $firebase(itemRef).$set({
            id: item.id,
            name : item.name,
            completed: !item.completed
        });

    }


    // Remove a Todo
    $scope.removeItem   = function (index, item, event) {

       // Avoid wrong removing
       if (item.id == undefined)return;

       // Firebase: Remove item from the list
       $scope.todos.$remove(item.id);

    }


    // Add new TODO
    $scope.addItem  = function () {

        // Create a unique ID
        var timestamp = new Date().valueOf()

        // Get the Firebase reference of the item
        var itemRef = new Firebase(FIREBASE_URL + timestamp);

        $firebase(itemRef).$set({
            id: timestamp,
            name : $scope.todoName,
            completed: false
        });

        $scope.todoName = "";

    }


}
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
	<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
	<script src="https://cdn.firebase.com/v0/firebase.js"></script>
	<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>


	<body ng-controller="DemoCtrl" class="container" ng-app="DemoApp">

	<h2>Realtime ToDo list with AngularJS and AngularFire</h2>
	<h4>Try it opening two browsers and adding / removing a TODO</h4>


	<!--ADD ITEM FORM-->
	<form name="myForm">

	<div>
	<input type="text"
	name="todoNameField"
	ng-model="todoName"
	placeholder="Add new task (min 3 chars)"
	required ng-minlength="3"
	class="form-control"
	ng-keyup="($event.keyCode == 13 && todoName.length > 2) ? addItem() : return"
	style="margin-bottom: 10px"
	/>

	<button ng-click="addItem()"
	ng-hide="myForm.todoNameField.$invalid"
	class="btn btn-primary" type="button"
	>Save Todo</button>
	</div>

	</form>

	<hr>


	<!--TODO LIST-->
	<div ng-repeat="item in todos" class=" list-group-item row">

	<div class="col-md-6">
	<!--COMPLETED ICON-->
	<span class="glyphicon glyphicon-thumbs-up"
	ng-show="item.completed"> </span>


	<!--todo label-->
	<span>{{item.name}} </span>

	<small class="text-warning"> [ {{item.id}} ]</small>
	</div>


	<div class="col-md-6">
	<!--Delete Todo button-->
	<a class="btn btn-danger" ng-click="removeItem($index, item, $event)">
	<i class="icon-remove-sign"></i>Delete
	</a>

	<a class="btn btn-warning" ng-click="changeStatus(item)">
	<i class="icon-remove-sign"></i>Change Status
	</a>
	</div>


	</div>
	var myApp = angular.module('DemoApp', ['firebase']);

	myApp.constant("FIREBASE_URL", "https://codepen-public.firebaseio.com/firebase1demo/codepen/" )


	function DemoCtrl($scope, $firebase, FIREBASE_URL) {

	// Get Stored TODOs
	var todosRef = new Firebase(FIREBASE_URL);
	$scope.todos = $firebase(todosRef);


	// Update the "completed" status
	$scope.changeStatus = function (item) {

	// Get the Firebase reference of the item
	var itemRef = new Firebase(FIREBASE_URL + item.id);

	// Firebase : Update the item
	$firebase(itemRef).$set({
	id: item.id,
	name : item.name,
	completed: !item.completed
	});

	}



	// Remove a Todo
	$scope.removeItem = function (index, item, event) {

	// Avoid wrong removing
	if (item.id == undefined)return;

	// Firebase: Remove item from the list
	$scope.todos.$remove(item.id);

	}



	// Add new TODO
	$scope.addItem = function () {

	// Create a unique ID
	var timestamp = new Date().valueOf()

	// Get the Firebase reference of the item
	var itemRef = new Firebase(FIREBASE_URL + timestamp);

	$firebase(itemRef).$set({
	id: timestamp,
	name : $scope.todoName,
	completed: false
	});

	$scope.todoName = "";

	}


	}