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:
Post a Comment