toggle menu

[AngularJS] 필터(filter) 와 데이터 바인딩 원리

2012. 10. 30. 10:52 AngularJS
필터 함수는 input에 입력된 값과 매칭되는 것으로만 새로운 배열을 생성하게 된다.
ng-repeat은 filter에 의해 생성된 배열을 자동적으로 뷰에 업데이트한다. 이 모든 과정이 개발자에게 투명하다.
필터에 대한 데이터 바인딩의 원리와 순서에 대해 살펴보자.


데이터 바인딩(Data-binding)
데이터 바인딩은 앵귤러JS에서 핵심 기능 중 하나이다. 페이지가 로드되면 앵귤러는 동이란 이름의 input과 데이터 모델을 연결하고 이 둘의 싱크를 유지시킨다.
여기 코드에서는 searchKeyword ng-model에 정한 이름을 가진 input에 사용자가 무언가를 타이핑하면 그 즉시 필터로서 기능할 수 있게 된다. 필터에 의해 데이터 모델이 변화되면, 리피터는 효과적으로 DOM을 업데이트하게 된다.





앵귤러 JS만의 데이터 바인딩 특징으로 인해 아래와 같이 간단하게 필터를 적용해줄 수 있다.
아래 소스를 직접 테스트해보려면 아래의 Plunker 링크를 클릭해보자.

Plunker
http://plnkr.co/edit/mAbKt50KJ0HyzwFBcBsK

<html ng-app>
<!--
하위 모든 요소는 모두 앵귤러 어플리케이션으로 다뤄진다.
-->


<head>
	<meta charset="utf-8">
	<title>My HTML File</title>
	
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">
	</script>
	<!--
	이 태그는 당연하게도 앵귤러js를 로드하고, 더불어 HTML페이지가 모두 로드된 후에
	브라우저에 의해 실행되는 콜백을 등록한다.
	-->
	
	<script type="text/javascript" charset="utf-8">
		
		/*
		 * BODY 태그 안에 ng-controller 에서 할당해준 컨트롤러의 이름과 동일한
		 * 자바스크립트 함수가 자동으로 매칭된다.
		 * ng-controller에서 호출할 때는 scope 파라메터를 따로 넣지 않았지만,
		 * 실제 컨트롤러 함수에서는 아래와 같이 $scope 를 파라메터로 받는다.
		 */
		function PhoneListController($scope)
		{
			//$scope는 지금까지 느낄 때 jQuery에서 $에 해당하는 전역 객체로 느껴진다.
			//어느 곳에서도 접근할 수 있도록 설정해주는 역할을 한다고 보인다.
			$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."
      			}
  			];
  			
			$scope.hello = "Hello, World!";
  			
  			//이렇게 선언된 배열 형태의 데이터 모델은 후에 NG-REPEAT에 의해 사용된다.
		}
		
	</script>
	
	
</head>
<body ng-controller="PhoneListController">
	
	<input type="text" ng-model="searchKeyword"/>
	<!--
	searchKeyword 라는 이름의 앵귤러 모델을 선언해주었다.
	여기에 입력된 내용은 searchKeyword 라는 모델에 자동으로 들어간다.	
	-->
	
	<ul>
		<li ng-repeat="phone in phones | filter:searchKeyword">
			이름 : {{phone.name}}<br />
			설명 : {{phone.snippet}}
		</li>
		
		<!--
		비슷한거 같지만, 자세히 살펴보면, filter 가 추가되었다.
		filter 함수는 ng-repeat에 영향을 주게 된다.
		특별히 searchKeyword에 입력된 값에 따라 내용을 필터링해서 보여준다.
		-->
		
	</ul>
</body>
</html>




AngularJS 관련 포스팅 더보기