데이터 바인딩은 앞에 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

이전에 AngularJS에 대해 간단히 알아보았습니다.


이번에는AngularJS의 컨트롤러에 대해 알아보겠습니다.


앞에서 ng-app, ng-model이라는 걸 봤었습니다. 


AngularJS의 controller는 ng-controller라는 속성을 부여하면 됩니다.


angularjs는 컨트롤러 단위로 바인딩을 합니다.


아래를 보면


<!DOCTYPE html>

<html ng-app>

<head>

    <title></title>

    <script src="angular.js"></script>

    <script>

        function controller1($scope){

            $scope.text='controller1';

        }

        function controller2($scope){

            $scope.text='controller2';

        }

    </script>

</head>

<body>

    <div ng-controller="controller1">

        {{text}}

    </div>

    <div ng-controller="controller2">

        {{text}}

    </div>

</body>

</html>


위 코드를 실행시켜보면 


controller1과 controller2가 나오게 됩니다.


{{text}}가 두개 들어 있지만 controller가 달라 서로 다른 글자를 보여줍니다.


controller 매개변수 $scope는 뷰와 컨트롤러 사이를 연결해 주는 역할을 합니다.


$scope를 통해 데이터를 전달합니다.


'AngularJS' 카테고리의 다른 글

[AngularJS] 데이터 바인딩과 필터  (0) 2013.10.30
[AngularJS] 설정 및 시작하기  (0) 2013.10.04

AngularJS를 설정하고 시작해 보겠습니다.


AngularJS는 구글에서 개발한 라이브러리 입니다. 


AngularJS는 자동 바인딩을 사용하여 객체의 속성을 바꾸면 화면이 자동으로 변경됩니다.


직접 보면서 해보도록 하겠습니다.


일단 AngularJS홈페이지를 방문하여 소스를 다운받습니다. (http://angularjs.org/)


아래와 같이 입력해 봅시다.


<!DOCTYPE html>

<html ng-app>  <!--ng-app이란 Angular.js라이브러리를 사용하겠다고 선언하는 것입니다.-->

<head>

    <title></title>

    <script src="angular.js"></script>


</head>

<body >

    <input ng-model="text">

    <h1>{{text}}</h1><!--{{ }}은 angular.js라이브러리의 템플릿입니다.-->

</body>

</html>


아래 input창에 텍스트를 입력해 보면 실시간으로 변경되는걸 보실수 있습니다.

{{text}}



여기서 소개는 마치도록 하고 다음부터 Angular.js에 대해 자세히 설명하겠습니다.


'AngularJS' 카테고리의 다른 글

[AngularJS] 데이터 바인딩과 필터  (0) 2013.10.30
[AngularJS] contorller  (0) 2013.10.28

+ Recent posts