How to fetch form data using Angularjs and display in codeigniter view?

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.

3 Comments

  1. Delia Maclanachan January 23, 2017
    • admin January 24, 2017
  2. Yogesh singh January 6, 2018

Leave a Reply