Search This Blog

2016-01-11

Angular JS Tutorial7: http service and Search Filter

The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.

Example :

Create a sample data file 7data.json as below
{
 "customers":[
  {
  "Name":"Steve",
  "Age":"30",
  "Location":"eastleigh"
  },
  {
   "Name":"Ari",
   "Age":"40",
   "Location":"eastleigh"
  },
  {
   "Name":"Clare",
   "Age":"35",
   "Location":"hedgeend"
  },
  {
   "Name":"Stu",
   "Age":"20",
   "Location":"southampton"
  }
   ]
}

7.html:
<!DOCTYPE html>
<html lang="en" >
<head>
 <title>$http,searchFilter</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 <script src="7controller.js"></script>
</head>
<body ng-app="myapp">
 <div ng-controller="mycontroller">
  <ul>
   <h2>Customer Details</h2>
   Any Search:<input type="text" ng-model="searchcriteria.$"></br></br>
   Name Search:<input type="text" ng-model="searchcriteria.Name"></br></br>
   Age Search:<input type="text" ng-model="searchcriteria.Age"></br></br>
   Location Search:<input type="text" ng-model="searchcriteria.Location"></br></br></br>
   <li ng-repeat="customer in customerdata|filter:searchcriteria">
  
     {{"Name:"+customer.Name+" Age:"+customer.Age +" Location:"+customer.Location}},
   
   </li>
  </ul>
 </div>
</body>
</html>

7controller.js :
var app=angular.module('myapp',[]);
app.controller('mycontroller',function($scope,$http){
 $http.get('http://localhost:8080/7data.json')
 .success(function(response)
 {
  $scope.customerdata=response.customers;
 }
 );
}
);

Output :



No comments: