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`)

    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">
    <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>
    <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 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 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="">
             <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="">
             <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="">
             <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 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 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>  
                <table class="table table-hover">
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email Id</th>
                            <th>Phone Number</th>
                        <tr ng-repeat="item in registrations">

    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',[]);
    function ($scope,$http)
         $scope.user = {};
        $scope.registrations = {}; 
            dataType : 'json',
            data : $scope.user, //forms user object
            headers : {'Content-Type': 'application/json'} 
        }).success(function (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()
    public function add()
        $request= json_decode(file_get_contents('php://input'), TRUE);
    public function fetchdata()
        // $data['fetchdata']=$this->ektreemodel->get_users();
        // $this->load->view('fetchangulardata',$data);
         foreach($result as $row)
         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.