Would you like to be notified for every new articles? Please click HERE to subscribe for newsletter.

Fetch Database Row Using Angular

  • Posted on: 13 April 2015
  • By: admin

Based my previous post about jQuery FetchRow plugin. We are going to fetch one record from database based on the ID we entered and display the result in the other input element but this time I try to achieve it using Angular.

Let's see the following complete client side code. For the server side script we are still using the same code in jQuery FetchRow.

<!DOCTYPE html>
<html ng-app="appFetchRow">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
 
<div ng-app="" ng-controller="frmItem"> 
 
  <p>Type an Item ID to fetch the item from database.</p>
  <table>
    <tr><td>ID</td><td>:</td><td><input type="text" name="item_id" ng-model="item_id" ng-keypress="fetchRow($event)" /></td></tr>
    <tr><td>Item name</td><td>:</td><td><input type="text" name="item_name" ng-model="item_name" /></td></tr>
    <tr><td>Qty</td><td>:</td><td><input type="text" name="item_qty" ng-model="item_qty" /></td></tr>
  </table>
  <br/>
  <input type="submit" name="submit" id="submit" />
 
</div>
 
<script>
var app = angular.module("appFetchRow", []);
app.controller("frmItem", function($scope, $http) {
  $scope.item_id = ""
  $scope.item_name = ""
  $scope.item_qty = ""
  $scope.fetchRow = function(event) {
    if (event.which == 13) {
      $http.get("data.php?id=" + $scope.item_id).success(function(response) {
        if (response.name != undefined) {
          $scope.item_name = response.name
          $scope.item_qty = response.qty
        }
        else {
          alert("No data found")
          $scope.item_name = ""
          $scope.item_qty = ""
        }
      });
    }
    else {
      $scope.item_name = ""
      $scope.item_qty = ""
    }
  }
});
</script>
 
</body>
</html>

Let's break down the code part by part.

As usual, we have to include Angular JS and define our page as Angular application with this code:

<!DOCTYPE html>
<html ng-app="appFetchRow">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

We also need to specify the controller part of our application using this code:

<div ng-app="" ng-controller="frmItem"> 
...
</div>

Add ng-model attribute to our input elements so Angular can recognize them.

<table>
  <!-- Add ng-keypress to item id so we can handle it when Enter key is pressed. -->
  <tr><td>ID</td><td>:</td><td><input type="text" name="item_id" ng-model="item_id" ng-keypress="fetchRow($event)" /> * Type item ID and press Enter.</td></tr>
  <tr><td>Item name</td><td>:</td><td><input type="text" name="item_name" ng-model="item_name" /></td></tr>
  <tr><td>Qty</td><td>:</td><td><input type="text" name="item_qty" ng-model="item_qty" /></td></tr>
</table>

For the ID field, add the ng-keypress because we want to add an event listener on it so we can fetch the data we need when we press Enter.

Finally we use the following Javascript to achieve the goal. When the Enter key is pressed we will send HTTP request to server side script to retrieve the data in JSON format.

// The callback function for keypress.
$scope.fetchRow = function(event) {
  // If the Enter key is pressed
  if (event.which == 13) {
    // Fetch the data using HTTP object.
    // The returned data should be in JSON format.
    $http.get("data.php?id=" + $scope.item_id).success(function(response) {
      // If the data found.
      if (response.name != undefined) {
        // Set the input elements value.
        $scope.item_name = response.name
        $scope.item_qty = response.qty
      }
      else {
        // Show message if no data found and empty the input fields.
        alert("No data found")
        $scope.item_name = ""
        $scope.item_qty = ""
      }
    });
  }
  else {
    // Empty the input fields if the pressed key is not Enter
    $scope.item_name = ""
    $scope.item_qty = ""
  }
}

The live demo can be seen there. You can also download the full source code from the following attachment.

AttachmentSize
Package icon Source code1.38 KB

Add new comment

Limited HTML

  • Allowed HTML tags: <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.