In the previous article we had discussed about ng-repeat functionality so please walk through the below link about ng-repeat directive.

  • ng-repeat

    • Now we are going to present here how to fetch form data using Angularjs and display in codeigniter view as follows.
    Let’s create a database table name as registration as below.

    Angularjs for beginners – Learn angularjs step by step in a day 
    CREATE TABLE IF NOT EXISTS `registration` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `City` varchar(50) NOT NULL,
  `firstname` varchar(50) DEFAULT NULL,
  `lastname` varchar(50) DEFAULT NULL,
  `phonenumber` varchar(50) NOT NULL,
  `Address` varchar(50) NOT NULL,
  `emailid` varchar(50) DEFAULT NULL,
  `password` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

    Now lets us create codeigniter form for the above database table, now add ng-model directive attribute to all input fields in the form , and also add display form using ng-repeat directive in same codeigniter form as shown below.

    AngularJS: Up and Running 
    <!DOCTYPE html>
<?php header ('Content-type: text/html; charset=utf-8'); ?>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example of Bootstrap 3 Horizontal Form Layout</title>
<link rel="stylesheet" href="<?php echo base_url();?>/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url();?>/css/bootstrap-theme.min.css">
      
<script src="<?php echo base_url();?>scripts/jquery-2.0.0.min.js"></script> 
<script src="<?php echo base_url();?>scripts/bootstrap.min.js"></script> 

<script src="<?php echo base_url();?>scripts/angular.min.js"></script> 

<script src="<?php echo base_url();?>angularjs/regController.js"></script>

</head>
<body ng-app="angularFormApp">
<div class="bs-example" ng-controller="regController">
    <form class="form-horizontal" name="firstform">
        <div class="form-group">
            <label for="inputFirstname" class="control-label col-xs-2">First Name</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="inputFirstname" placeholder="FirstName" ng-model="user.firstname">
                
            </div>
        </div>
         <div class="form-group">
            <label for="inputLastname" class="control-label col-xs-2">Last Name</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="inputLastname" placeholder="LastName" ng-model="user.lastname">
            </div>
        </div>
        
        <div class="form-group">
            <label for="inputEmail" class="control-label col-xs-2">Email</label>
            <div class="col-xs-10">
                <input type="email" class="form-control" id="inputEmail" placeholder="Email" ng-model="user.email">
            </div>
        </div>
         <div class="form-group">
            <label for="inputEmail" class="control-label col-xs-2">City</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="inputcity" placeholder="city" ng-model="user.city">
            </div>
        </div>
         <div class="form-group">
            <label for="inputEmail" class="control-label col-xs-2">Phone</label>
            <div class="col-xs-10">
                <input type="number" class="form-control" id="inputphone" placeholder="Phone" ng-model="user.phone">
            </div>
        </div>
         <div class="form-group">
            <label for="inputEmail" class="control-label col-xs-2">Address</label>
            <div class="col-xs-10">
                <textarea ng-model="user.address" class="form-control" id="inputaddress"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-2">Password</label>
            <div class="col-xs-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" ng-model="user.password">
            </div>
        </div>
       
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary" ng-click="submitForm()">Sign Up</button>
                   </div></form>   </div>  
                <div>  
                 
            <table class="table table-hover">
                <thead>
                    <tr>
                        
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email Id</th>
                        <th>City</th>
                        <th>Phone Number</th>
                        <th>Address</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in registrations">
                        <td>{{item.firstname}}</td>
                        <td>{{item.lastname}}</td>
                        <td>{{item.emailid}}</td>
                         <td>{{item.city}}</td>
                        <td>{{item.phone}}</td>
                         <td>{{item.address}}</td>
                     </tr>
                </tbody>
            </table>
             </div>    
      </div>
   </body>
</html>

    For above html form let’s create angular module and controller to insert and fetch the data from mysql database.

    var angularFormApp = angular.module('angularFormApp',[]);
angularFormApp.controller('regController',['$scope','$http',
function ($scope,$http)
{
     $scope.user = {};
    $scope.submitForm=function()
{
    $scope.registrations = {}; 
       $http({
        method:'post',
        dataType : 'json',
        url:'http://localhost:81/Codeigniter/index.php/welcome/add',
        data : $scope.user, //forms user object
        headers : {'Content-Type': 'application/json'} 
    }).success(function (data)
    {
          $scope.registrations=data;
          
    });
   
};
          
}]);

    Using angular module create controller as ‘regController’ and post form data using http service , posted form data will passes as json data to codeigniter controller function , there we need to decode the json data and insert into mysql database table registration.
    After insertion, let’s fetch data using codeigniter get method and store it in an array $arr_data .

    Professional AngularJS (WROX)

    Let’s use codeigniter foreach iteration to store individual data into array and finally pass $arr_data into json_encode(); now check the code below. 

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

class Welcome extends CI_Controller {
public function angulardemo()
{
     $this->fetchdata();
     $this->load->view("angulardemo",$this->data);
     

}
public function add()
{
    $request= json_decode(file_get_contents('php://input'), TRUE);
    $data1=$this->ektreemodel->insert_form($request);
     $this->fetchdata();   
}
public function fetchdata()
{
    // $data['fetchdata']=$this->ektreemodel->get_users();
    // $this->load->view('fetchangulardata',$data);
     $result=$this->db->get('registration')->result();
     $arr_data=array();
     $i=0;
     foreach($result as $row)
     {
         $arr_data[$i]['user_id']=$row->user_id;
         $arr_data[$i]['firstname']=$row->firstname;
         $arr_data[$i]['lastname']=$row->lastname;
         $arr_data[$i]['emailid']=$row->emailid;
       $i++;  
     }
    
     echo json_encode($arr_data);
     

}
}
?>

    Here in the above controller function json encoded data is echoed, the converted data is returned to angular success function. Then by using ng-repeat directive we can display the data to codeigniter view.

    Thanks for reading this article, for any queries please use comments section.