Create Todo App with CodeIgniter 3 + AngularJs – Part 2

4. To add a new record, create a form with ng-submit attribute. It will trigger $http.post whenever the form is posted.

<form role="form" ng-submit="addTask()">


<div class="form-group col-md-10">
		<input type="text" class="form-control" name="title" ng-model="taskTitle" placeholder="Enter task title" required>
	</div>


	<button type="submit" class="btn btn-default">Add task</button>
</form>

5. To display the records, use data-ng-repeat.

<table>


<tr data-ng-repeat="task in tasks track by $index">


<td>{{ $index + 1 }}</td>



<td><input class="todo" type="text" ng-model-options="{ updateOn: 'blur' }" ng-change="updateTask(tasks[$index])" ng-model="tasks[$index].title"></td>



<td style="text-align:center"><input class="todo" type="checkbox" ng-change="updateTask(tasks[$index])"ng-model="tasks[$index].status" ng-true-value="'1'" ng-false-value="'0'"></td>



<td style="text-align:center"><a class="btn btn-xs btn-default" ng-click="deleteTask(tasks[$index])"><span class="glyphicon glyphicon-trash"></span></a></td>


</tr>


</table>

Note that we display the record in input type element. By using ng-change, it will trigger update function if the title changes. The same concept applies to the status checkbox.

6. We bind delete function to the delete button for every record as follows:

<td style="text-align:center"><a class="btn btn-xs btn-default" ng-click="deleteTask(tasks[$index])"><span class="glyphicon glyphicon-trash"></span></a></td>

You may apply some CSS styling to make the page looks better. I use twitter bootstrap.

And that’s all. Check-out the demo page here: Todo App Demo

If you have problems or queries with regards to the tutorial, just drop a comment below. Any feedback are most welcome.