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.
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 .
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.
Hi to every body, it’s my first go to see of this blog; this web site includes amazing and actually fine data for visitors.
Hi Saritha,
Thanks for the tutorial.
Can you have any tutorial available to check username availability using angular in CodeIgniter?
Thanks.