03. controller 사이의 데이터 공유 : http://forum.falinux.com/zbxe/index.php?document_srl=805325
04. controller에 메소드 만들기 : http://forum.falinux.com/zbxe/index.php?document_srl=805915


지난 시간에는 filter의 사용법에 대해서 알아보았습니다.

이번에는 angular-js를 사용하면서 매우 많이 사용하게 되는 ng-repeat에 대해서 알아보겠습니다.

우선 service와 controller를 하나 만들어보겠습니다.

public/javascripts/main.js를 아래와 같이 수정합니다.
?
public/javascripts/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var firstApp = angular.module('FirstApp', []);
firstApp.factory('Data', function() {
        return {message: "I'm data from a service"}
});
firstApp.factory('Sites', function() {
        var Sites = {};
        Sites.searchEngines = [
                {
                        name: 'google',
                        url: 'http://www.google.co.kr'
                },
                {
                        name: 'yahoo',
                        url: 'http://www.yahoo.co.kr'
                },
                {
                        name: 'naver',
                        url: 'http://www.naver.com'
                },
                {
                        name: 'daum',
                        url: 'http://www.daum.net'
                },
                {
                        name: 'bing',
                        url: 'http://www.bing.com'
                }
        ];
        return Sites;
});
firstApp.filter('reverse', function() {
        return function (text) {
                return text.split("").reverse().join("");
        }
});
firstApp.controller('FirstCtrl', function($scope, Data) {
        $scope.data = Data;
});
firstApp.controller('SecondCtrl', function($scope, Data) {
        $scope.data = Data;
 
        $scope.reversedMessage = function (message) {
                return message.split("").reverse().join("");
        };
});
firstApp.controller('SiteCtrl', function($scope, Sites) {
        $scope.sites = Sites;
});


이제 public/index.html을 아래와 같이 수정합니다.

?
public/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>
<div ng-app="FirstApp">
        <div ng-controller="SiteCtrl">
                <table>
                        <tr ng-repeat="site in sites.searchEngines">
                                <td>{{site.name}}</td>
                                <td><a href={{site.url}}>{{site.url}}</a></td>
                        </tr>
                </table>
        </div>
</div>
<script type="text/javascript" src="components/angularjs/angular.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>


브라우저를 열어서 확인해보면 service에 등록되어있는 검색엔진들이 화면에 출력이 됩니다.



이제 angular-js에 내장되어있는 기본 filter를 사용하여 검색을 할 수 있도록 해보겠습니다.

public/index.html을 아래와 같이 수정합니다.

?
public/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>
<div ng-app="FirstApp">
        <div ng-controller="SiteCtrl">
                <input type='text' ng-model='searchText'>
                <table>
                        <tr ng-repeat="site in sites.searchEngines | filter:searchText">
                                <td>{{site.name}}</td>
                                <td><a href={{site.url}}>{{site.url}}</a></td>
                        </tr>
                </table>
        </div>
</div>
<script type="text/javascript" src="components/angularjs/angular.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>


브라우저를 열어서 확인해보면 텍스트 입력창에 해당하는 글자가 있는 항목만 목록에 나오는 것을 확인할 수 있습니다.


이렇게 filter와 ng-repeat를 사용하면 아주 간단하게 실시간으로 반영이 되는 검색을 만들 수 있습니다.

이 게시물을...