Holla Tech - Learn
AngularJS: A To-Do App
 

Let’s build a simple To-Do app using AngularJS.
We will start by creating the HTML: 

<div ng-controller=“todoList”>
<span>Items: {{todos.length}}</span>
<ul>
  <li ng-repeat=“todo in todos”>
    <label class=“checkbox”>
    <input type=“checkbox” ng-model=“todo.done”>
    <span class=“done-{{todo.done}}”>{{todo.text}}</span>
    </label>
  </li>
</ul>
<form ng-submit=“addTodo()”>
  <input type=“text” ng-model=“todoText” size=“30”
    placeholder=“add new todo here”>
  <input type=“submit” value=“add”>
</form>
</div> 

 

We created a list for all our todo items in the todos collection using the ng-repeat directive. Each todo item will have text and done properties and is displayed as a checkbox and a span containing the text. We have also created a form with a textbox and a submit button to add new items.

Now it’s time to add the functionality.

<script>
var app = angular.module(‘todoApp’, []);
       
app.controller(‘todoList’, function($scope) {
  $scope.todos = [ {text:‘Learn AngularJS’, done:true},
    {text:‘build an AngularJS app’, done:false}];

  $scope.addTodo = function() {
    if($scope.todoText !== ) {
      $scope.todos.push({text:$scope.todoText, done:false});
      $scope.todoText = ;
    }
  };
});
</script> 

 

We initialize our todos list with some default values and create the addTodo function that will be called when the add button is clicked.

Try It Yourself to see the whole code in action.  

TASK:
Customize the To-Do app, add an option to remove items from the list, and share your creations with the community on telegram.

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE AngularJS MAIN COURSE PAGE. 

AngularJS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT