Laravel Angular CRUD (05) :: Edit data by Angular Js in Laravel 5

In this episode, I’ll show you how to edit a record. In the last episode, I have shown how to insert data.For better looking I have changed in index.blade.php file.

You can read previous posts

You can find this project in my Github repository Laravel Angular CURD

First add ng-click directive in edit button which in ng-repeat loop and add a edit method in ng-click directive like as below

<a href="#edit-modal" data-toggle="modal" ng-click="edit(" class="btn btn-warning btn-xs">Edit</a>

Now define the edit method in todo-controller js file. By this method we fetch the data which we want to edit by passing the record in the function.

$scope.edit = function (id) {
  $http.get(SERVICEURL + '/todos/' + id + '/edit').success(function (data) {
  $scope.todo = data;

Now add a bootstrap modal for showing the edit data. At the below of modal in a button add a update method in ng-click directive.

{{-- update modal --}}
 <div class="modal fade" id="edit-modal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 <h4 class="modal-title">Edit task</h4>
 <div class="modal-body">

 <label for="name">Task name</label>
 <input class="form-control" type="text" ng-model="" value="@{{ }}">

 <select class="form-control" ng-model="todo.status">
 <option value="1" ng-selected="todo.status">Complete</option>
 <option value="0" ng-selected="todo.status==0" }}>Incomplete</option>

 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-primary" ng-click="update(todo)">Save</button>
 {{-- end update modal --}}

Now define the update method in todo-controller.js file

$scope.update = function (todo) {
  $http.put(SERVICEURL + '/todos/' + + '', todo)
   .success(function (data) {

Let’s define the edit and update method in our TodoController.php file which in your app\http\controllers directory.

public function edit($id)
    return $todo;

public function update($id)
   $data = ['success' => true, 'msg' => 'update success'];
   return Response::json($data, 200);


Finished! In the next episode, I’ll show you how to delete a record.

Share on :

Leave a Reply

7 × = fourteen