간단하게 검색기능 구현하기
filter를 사용하면 아주 쉽게 실시간 검색기능을 구현 할 수 있다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body ng-app="mainApp">
<input type="text" ng-model="searchBox">
<div ng-controller="people">
<ul>
<h2>Name And Age Of Programmers In the Local Area : </h2>
<li ng-repeat="person in persons | filter : searchBox">
{{ person.Name + ' : ' + person.Age }}
</li>
</ul>
</div>
</body>
</html>
database.json
{
"records" : [
{
"Name":"Mehul",
"Age":"18"
},
{
"Name":"Jai",
"Age":"18"
},
{
"Name":"Alex",
"Age":"20"
},
{
"Name":"Anonymous",
"Age":"?"
},
{
"Name":"홍길동",
"Age":"34"
},
{
"Name":"홍길순",
"Age":"43"
},
{
"Name":"김길동",
"Age":"12"
},
{
"Name":"둘리",
"Age":"22"
}
]
}
var app = angular.module('mainApp', []);
app.controller('people', function($scope, $http){
$http.get('http://********/angularJS/database.json')
.success(function(response){
$scope.persons = response.records;
});
});
결과화면
'JavaScript > angularJS' 카테고리의 다른 글
| angularJS $http (0) | 2018.07.22 |
|---|---|
| AngularJS Login App (0) | 2018.07.22 |
| Routeing (0) | 2018.07.21 |
| AngularJS01. Hello World (0) | 2018.07.20 |
| 3. todo 여러개 출력하기(반복문 사용하기) - ng-repeat (0) | 2018.05.18 |
