데이터 바인딩은 앞에 controller부분에서 봤었습니다.
다시한번 데이터 바인딩을 살펴보고 필터에 대해 설명 하겠습니다.
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title></title>
<script src="angular.min.js"></script>
<script type="text/javascript">
function PhoneListController($scope){
$scope.title = "PhoneList";
$scope.phones =[
{
"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S."
},
{
"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet."
},
{
"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet."
}
];
}
</script>
</head>
<body ng-controller="PhoneListController">
<h1>{{title}}</h1>
<input type="text" ng-model="searchKeyword"/>
<ul>
<li ng-repeat="phone in phones | filter:searchKeyword">
이름 : {{phone.name}}<br />
설명 : {{phone.snippet}}
</li>
</ul>
</body>
</html>
{{title}}에는 controller에서 $scope.title='PhoneList'라는 값을 설정했으므로 PhoneList가 화면에 출력됩니다.
이 하나의 데이터를 model이라 부릅니다.
$scope.phones는 배열에 여러개의 데이터를 담고 있습니다. 이를 collection이라 부릅니다.
collection은 ng-repeat속성을 사용해 화면에 반복적으로 출력할 수 있습니다.
filter는 ng-repeat에 영향을 주게 됩니다.
input태그의 ng-model값과 filter의 값이 서로 같으므로 input테그에서 받은 문자열에 따라
내용을 필터링 해서 보여주게 됩니다.
직접 해보신다면 이해가 빠를것 입니다.
'AngularJS' 카테고리의 다른 글
| [AngularJS] contorller (0) | 2013.10.28 |
|---|---|
| [AngularJS] 설정 및 시작하기 (0) | 2013.10.04 |