As you all know Angularjs is getting popularity day by day, because of its data binding and dependency injection to reduce code, otherwise we need to write lot of code, client side framework, easy to integrate with any language which makes in top position. In previous discussion we had worked on ng-route model.
Now we will discuss how to update form using Angularjs and codeigniter, before going to concept you all need to know about Factory provider, which will adds below abilities.

  • We can use other services(which have dependencies).
  • We can initialize the service.
  • Delayed and Lazy initialization can be done using Factor recipe.

Now I will use factory recipe in our update form functionality, let’s create app.js file

var welcome = angular.module('welcome', ['ngRoute']);
welcome.controller('editRegistration',['$scope','$route','$routeParams','forumFactory',function($scope,$route,$routeParams,forumFactory){
  
    $scope.current={};
forumFactory.getUser($routeParams.id).success(function(data){
                   
            $scope.current = data;
});
$scope.editUser= function(current){
    forumFactory.updateUser(current).success(function(data)
        {
            //route.reload refreshes the contents of the current page without updating
            //$scope.response=data;
           // alert(data);
            if(data!=="")
            {
                $scope.response='updated record successfully';
            }else{
                 $scope.response='Failed to updated record';
            }
            //$route.reload(data);
        });
    
};
}]);
welcome.factory("forumFactory",['$http',function($http){
  
    return{
        
        getUser : function(id)
        {
          return $http({
           url: 'http://localhost:81/Codeigniter/index.php/welcome/getUser/'+id,
           method: 'GET'
          }); 
        },
        updateUser : function(current)
        {
            return $http({
                url:'http://localhost:81/Codeigniter/index.php/welcome/updateUser',
                method:'POST',
                data :"user_id="+current.user_id+"&firstname="+current.firstname+"&lastname="+current.lastname+"&emailid="+current.emailid+"&City="+current.City+"&phone="+current.phone+"&address="+current.address,
                headers : {'Content-Type': 'application/x-www-form-urlencoded'}
            });
        }
        };
    
}]);

Don’t be panic seeing the above angular code, which is easy to understand, let’s check the code now.
Here we create update controller in our app.js file, I had used dependency injection concept by calling factory service in update Controller.
In the factory recipe I used two functions to get the data which need to be updated and used post method to update the record, now I called these two functions in update controller.
Now let’s create form_edit.html in angular_pages folder as we discussed in previous article.

Now look at codeigniter controller functions below. 

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {

	public $data;
 	public function __construct()
	{//Core controller constructor
	    parent::__construct();
	    $this->load->model('ektreemodel');
				
	} 

public function getUser($user_id)
{
    echo json_encode($this->ektreemodel->getuserdetails($user_id));
}
public function updateUser()
{
    
  $result=$this->ektreemodel->updaterecord();
    if($result)
                {   
                    echo json_encode(array("response" => "success"));
                }
                else
                {
                    echo json_encode(array("response" => "failedProcess"));
                } 
    
}




}

?>

Now let’s check model function how to update a record using below code.

[wp-like-lock]

<?php
class Ektreemodel extends CI_Model
{
public function getuserdetails($user_id)
 {

  $this->db->select('*');
  $this->db->from('registration');
  $this->db->where('user_id',$user_id);
  $query=$this->db->get();
  return $query->row();
  
 }
 public function updaterecord()
 {
    $user_id=$this->input->post('user_id');
    $firstname=$this->input->post('firstname');
    $lasttname=$this->input->post('lastname');
    $emailid=$this->input->post('emailid');
    $City=$this->input->post('City');
    $phone=$this->input->post('phone');
    $address=$this->input->post('address');
    $data = array(
    		"firstname" =>$firstname,
    		"lastname"  =>$lasttname,
                "emailid"   =>$emailid,
    		"City"   =>$City,
                "phone"=>$phone,
                "address"=>$address 
    	        );	
    	$this->db->where("user_id",$user_id);
    	return $this->db->update("registration", $data);
  
 }
    
    
}
?>

[/wp-like-lock]

Now we are at last step, while clicking the edit link we need to pass user_id to the angular controller, I am adding the single line of code, which needs to be placed in users_list.html and also update route config as below.

.when("/edit/:id", {
        templateUrl:'angular_pages/edit_form.html',
        controller:"editRegistration"
    })

This file is already created in previous article, Please go through the complete article.

 <td><a href="#/edit/{{item.user_id}}"><span class="glyphicon glyphicon-pencil"></span></a></td>

Thanks for reading this article ,for any queries please use comment section. Subscribe to eknowledgetree for new and latest classes.