Getting the data from the json file and display data using ng-repeat in list format(one way):
index.html :
<!DOCTYPE html>
<!-- Referenced as an example from by rabidGadfly.com -->
<!-- Define this as an AngularJS app that uses the module named myApp -->
<html ng-app="myApp">
<head>
<!-- Don't forget to load angularjs AND angular-resource.js -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.js"></script>
<!-- Our modules and controller -->
<script src="module.js"></script>
<!-- Give it some style -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div ng-controller="StatesController" >
<span class="searchtext">Search:</span>
<span class="inputbg"><input ng-model="criteria" placeholder="Search for..."></span>
<ul class="states">
<li ng-repeat="state in stateData | filter:criteria | orderBy:'name'">
<div class="resultwrapper">
<span class="title">{{state.name}}</span><br>
<span class="bold">Abbreviation:</span> {{state.abbreviation}}<br>
<span class="bold">Capital:</span> {{state.capital}}
</div>
</li>
</ul>
</div>
</body>
</html>
module.js:
angular.module('myApp.service',['ngResource']).
factory('States', function($resource){
return $resource('states.json', {},{
get: {method: 'GET', isArray:true}
});
});
angular.module('myApp',['myApp.service']);
var StatesController = function($scope,States) {
$scope.stateData = States.get();
};
style.css:
body {
font-family: Helvetica,Arial;
font-size: 12pt;
background-color:#cecece;
}
input {
width:250px;
font-size:12pt;
border:none;
}
li {
list-style:none;
}
.resultwrapper {
background-color:#fff;
width:250px;
text-align:center;
padding:10px;
border-radius:8px;
margin:10px;
}
.title {
color:#045FB4;
}
.searchtext {
font-size:1.2em;
font-weight:bold;
color:#006;
padding-right:5px;
}
.inputbg {
background:#fff;
padding:8px;
border-radius:4px;
}
.bold {
font-weight:bold;
}
states.json:
[
{"name":"Massachusetts", "capital":"Boston","abbreviation":"MA"},
{"name":"Alabama", "capital":"Montgomery","abbreviation":"AL"},
{"name":"Alaska", "capital":"Juneau","abbreviation":"AK"},
{"name":"Arizona", "capital":"Phoenix","abbreviation":"AZ"},
{"name":"Arkansas", "capital":"Little Rock","abbreviation":"AR"},
{"name":"California", "capital":"Sacramento","abbreviation":"CA"},
{"name":"Colorado", "capital":"Denver","abbreviation":"CO"},
{"name":"Pennsylvania", "capital":"Harrisburg","abbreviation":"PA"},
{"name":"Connecticut", "capital":"Hartford","abbreviation":"CT"},
{"name":"Delaware", "capital":"Dover","abbreviation":"DE"},
{"name":"Florida", "capital":"Tallahassee","abbreviation":"FL"},
{"name":"Georgia", "capital":"Atlanta","abbreviation":"GA"},
{"name":"Guam", "capital":"Guam","abbreviation":"GU"},
{"name":"Hawaii", "capital":"Honolulu","abbreviation":"HI"},
{"name":"Idaho", "capital":"Boise","abbreviation":"ID"},
{"name":"Illinois", "capital":"Springfield","abbreviation":"IL"},
{"name":"Indiana", "capital":"Indianapolis","abbreviation":"IN"},
{"name":"Iowa", "capital":"Des Moines","abbreviation":"IA"},
{"name":"Kansas", "capital":"Topeka","abbreviation":"KS"},
{"name":"Kentucky", "capital":"Frankfort","abbreviation":"KY"},
{"name":"Louisiana", "capital":"Baton Rouge","abbreviation":"LA"},
{"name":"Maine", "capital":"Augusta","abbreviation":"ME"},
{"name":"Maryland", "capital":"Annapolis","abbreviation":"MD"},
{"name":"Michigan", "capital":"Lansing","abbreviation":"MI"},
{"name":"Minnesota", "capital":"Saint Paul","abbreviation":"MN"},
{"name":"Mississippi", "capital":"Jackson","abbreviation":"MS"},
{"name":"Missouri", "capital":"Jefferson City","abbreviation":"MO"},
{"name":"Montana", "capital":"Helena","abbreviation":"MT"},
{"name":"Nebraska", "capital":"Lincoln","abbreviation":"NE"},
{"name":"Nevada", "capital":"Carson City","abbreviation":"NV"},
{"name":"New Hampshire", "capital":"Concord","abbreviation":"NH"},
{"name":"New Jersey", "capital":"Trenton","abbreviation":"NJ"},
{"name":"New Mexico", "capital":"Santa Fe","abbreviation":"NM"},
{"name":"New York", "capital":"Albany","abbreviation":"NY"},
{"name":"North Carolina", "capital":"Raleigh","abbreviation":"NC"},
{"name":"North Dakota", "capital":"Bismarck","abbreviation":"ND"},
{"name":"Ohio", "capital":"Columbus","abbreviation":"OH"},
{"name":"Oklahoma", "capital":"Oklahoma City","abbreviation":"OK"},
{"name":"Oregon", "capital":"Salem","abbreviation":"OR"},
{"name":"Rhode Island", "capital":"Providence","abbreviation":"RI"},
{"name":"South Carolina", "capital":"Columbia","abbreviation":"SC"},
{"name":"South Dakota", "capital":"Pierre","abbreviation":"SD"},
{"name":"Tennessee", "capital":"Nashville","abbreviation":"TN"},
{"name":"Texas", "capital":"Austin","abbreviation":"TX"},
{"name":"Utah", "capital":"Salt Lake City","abbreviation":"UT"},
{"name":"Vermont", "capital":"Montpelier","abbreviation":"VT"},
{"name":"Virginia", "capital":"Richmond","abbreviation":"VA"},
{"name":"Washington", "capital":"Olympia","abbreviation":"WA"},
{"name":"West Virginia", "capital":"Charleston","abbreviation":"WV"},
{"name":"Wisconsin", "capital":"Madison","abbreviation":"WI"},
{"name":"Wyoming", "capital":"Cheyenne","abbreviation":"WY"}
]
output:
index.html :
<!DOCTYPE html>
<!-- Referenced as an example from by rabidGadfly.com -->
<!-- Define this as an AngularJS app that uses the module named myApp -->
<html ng-app="myApp">
<head>
<!-- Don't forget to load angularjs AND angular-resource.js -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.js"></script>
<!-- Our modules and controller -->
<script src="module.js"></script>
<!-- Give it some style -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div ng-controller="StatesController" >
<span class="searchtext">Search:</span>
<span class="inputbg"><input ng-model="criteria" placeholder="Search for..."></span>
<ul class="states">
<li ng-repeat="state in stateData | filter:criteria | orderBy:'name'">
<div class="resultwrapper">
<span class="title">{{state.name}}</span><br>
<span class="bold">Abbreviation:</span> {{state.abbreviation}}<br>
<span class="bold">Capital:</span> {{state.capital}}
</div>
</li>
</ul>
</div>
</body>
</html>
module.js:
angular.module('myApp.service',['ngResource']).
factory('States', function($resource){
return $resource('states.json', {},{
get: {method: 'GET', isArray:true}
});
});
angular.module('myApp',['myApp.service']);
var StatesController = function($scope,States) {
$scope.stateData = States.get();
};
style.css:
body {
font-family: Helvetica,Arial;
font-size: 12pt;
background-color:#cecece;
}
input {
width:250px;
font-size:12pt;
border:none;
}
li {
list-style:none;
}
.resultwrapper {
background-color:#fff;
width:250px;
text-align:center;
padding:10px;
border-radius:8px;
margin:10px;
}
.title {
color:#045FB4;
}
.searchtext {
font-size:1.2em;
font-weight:bold;
color:#006;
padding-right:5px;
}
.inputbg {
background:#fff;
padding:8px;
border-radius:4px;
}
.bold {
font-weight:bold;
}
states.json:
[
{"name":"Massachusetts", "capital":"Boston","abbreviation":"MA"},
{"name":"Alabama", "capital":"Montgomery","abbreviation":"AL"},
{"name":"Alaska", "capital":"Juneau","abbreviation":"AK"},
{"name":"Arizona", "capital":"Phoenix","abbreviation":"AZ"},
{"name":"Arkansas", "capital":"Little Rock","abbreviation":"AR"},
{"name":"California", "capital":"Sacramento","abbreviation":"CA"},
{"name":"Colorado", "capital":"Denver","abbreviation":"CO"},
{"name":"Pennsylvania", "capital":"Harrisburg","abbreviation":"PA"},
{"name":"Connecticut", "capital":"Hartford","abbreviation":"CT"},
{"name":"Delaware", "capital":"Dover","abbreviation":"DE"},
{"name":"Florida", "capital":"Tallahassee","abbreviation":"FL"},
{"name":"Georgia", "capital":"Atlanta","abbreviation":"GA"},
{"name":"Guam", "capital":"Guam","abbreviation":"GU"},
{"name":"Hawaii", "capital":"Honolulu","abbreviation":"HI"},
{"name":"Idaho", "capital":"Boise","abbreviation":"ID"},
{"name":"Illinois", "capital":"Springfield","abbreviation":"IL"},
{"name":"Indiana", "capital":"Indianapolis","abbreviation":"IN"},
{"name":"Iowa", "capital":"Des Moines","abbreviation":"IA"},
{"name":"Kansas", "capital":"Topeka","abbreviation":"KS"},
{"name":"Kentucky", "capital":"Frankfort","abbreviation":"KY"},
{"name":"Louisiana", "capital":"Baton Rouge","abbreviation":"LA"},
{"name":"Maine", "capital":"Augusta","abbreviation":"ME"},
{"name":"Maryland", "capital":"Annapolis","abbreviation":"MD"},
{"name":"Michigan", "capital":"Lansing","abbreviation":"MI"},
{"name":"Minnesota", "capital":"Saint Paul","abbreviation":"MN"},
{"name":"Mississippi", "capital":"Jackson","abbreviation":"MS"},
{"name":"Missouri", "capital":"Jefferson City","abbreviation":"MO"},
{"name":"Montana", "capital":"Helena","abbreviation":"MT"},
{"name":"Nebraska", "capital":"Lincoln","abbreviation":"NE"},
{"name":"Nevada", "capital":"Carson City","abbreviation":"NV"},
{"name":"New Hampshire", "capital":"Concord","abbreviation":"NH"},
{"name":"New Jersey", "capital":"Trenton","abbreviation":"NJ"},
{"name":"New Mexico", "capital":"Santa Fe","abbreviation":"NM"},
{"name":"New York", "capital":"Albany","abbreviation":"NY"},
{"name":"North Carolina", "capital":"Raleigh","abbreviation":"NC"},
{"name":"North Dakota", "capital":"Bismarck","abbreviation":"ND"},
{"name":"Ohio", "capital":"Columbus","abbreviation":"OH"},
{"name":"Oklahoma", "capital":"Oklahoma City","abbreviation":"OK"},
{"name":"Oregon", "capital":"Salem","abbreviation":"OR"},
{"name":"Rhode Island", "capital":"Providence","abbreviation":"RI"},
{"name":"South Carolina", "capital":"Columbia","abbreviation":"SC"},
{"name":"South Dakota", "capital":"Pierre","abbreviation":"SD"},
{"name":"Tennessee", "capital":"Nashville","abbreviation":"TN"},
{"name":"Texas", "capital":"Austin","abbreviation":"TX"},
{"name":"Utah", "capital":"Salt Lake City","abbreviation":"UT"},
{"name":"Vermont", "capital":"Montpelier","abbreviation":"VT"},
{"name":"Virginia", "capital":"Richmond","abbreviation":"VA"},
{"name":"Washington", "capital":"Olympia","abbreviation":"WA"},
{"name":"West Virginia", "capital":"Charleston","abbreviation":"WV"},
{"name":"Wisconsin", "capital":"Madison","abbreviation":"WI"},
{"name":"Wyoming", "capital":"Cheyenne","abbreviation":"WY"}
]
output:
No comments:
Post a Comment