Angularjs의 ngrepeat에 대해서 알아보겠습니다.

ngrepeat는 쉽게 얘기하면 배열을 처리해주는 기능을 한다고 생각하시면 될거 같습니다.

예제로 간단하게 ngrepeat를 사용해보겠습니다.

- html 

<body ng-app="myApp">
  <div ng-controller="ctrl1">
    <div ng-repeat="friend in friends">
      <span> {{ friend.name }} </span>
      <span> {{ friend.age }} </span>
      <span> {{ friend.gender }} </span>
    </div>
  </div>
</body>

- javascript

var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope) {
  $scope.friends = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'girl'},
    {name:'Joy', age:15, gender:'girl'},
    {name:'Mary', age:28, gender:'girl'},
    {name:'Peter', age:95, gender:'boy'},
    {name:'Sebastian', age:50, gender:'boy'},
    {name:'Erika', age:27, gender:'girl'},
    {name:'Patrick', age:40, gender:'boy'},
    {name:'Samantha', age:60, gender:'girl'}
	];
});


controller안에 friends라는 JSON 배열을 만들었습니다.

html에서는 ng-repeat를 이용하여 "friend in friends" 배열 을 돌면서
JSON 배열의 수 만큼 반복하여 html을 작성해주는 예제입니다.

angularjs 가장 장점 중 하나로 소스 코드 작성시 소스가 굉장히 간결해집니다.



예제 : 이동

다음에는 filter를 이용하여 필터링 하는 부분을 알아보겠습니다.


'AngularJS' 카테고리의 다른 글

[Angularjs] angularjs click ngclick 버튼 클릭  (0) 2015.12.23
[Angularjs] filter, $filter, 필터링, 재정렬  (0) 2015.12.22
[Angularjs] angularjs controller 컨트롤러  (0) 2015.12.14
[Angularjs] angularjs $scope 스코프  (0) 2015.12.14
[Angularjs] angularjs 시작하기, 기초, 샘플  (0) 2015.12.10

Angularjs의 controller에 대해서 알아보겠습니다.

controller는 $scope를 이용해서 controller <-> view 양방향 바인딩이 가능하게 해주는 역할을 합니다.

예제로 간단하게 controller를 사용해보겠습니다.

- html 

<body ng-app="myApp">

  <div ng-controller="ctrl1">
    <input ng-model="txt">
    <span>{{txt}}</span>
    
    <button ng-click="click()">버튼 클릭</button>
  </div>
  <hr/>
  <div ng-controller="ctrl2">
    <input ng-model="txt">
    <span>{{txt}}</span>
    
    <button ng-click="click()">버튼 클릭</button>
  </div>
</body>

- javascript

var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope) {
  $scope.txt = "테스트입니다";
  
  $scope.click = function() {
  	alert("버튼 클릭");
  }
});

app.controller('ctrl2', function($scope) {
  $scope.txt = "ctrl2 컨트롤러입니다.";
  
  $scope.click = function() {
  	alert("ctrl2 컨트롤러입니다.");
  }
});


예제에서는 두 개의 컨트롤러를 만들었습니다. 

나중에 angularjs를 이용한 프로젝트를 진행하시다면 화면별로 controller를 분리하여 작성하시면 편하게 사용하실 수 있을꺼 같습니다.



예제 : 이동


간단하게 컨트롤러를 사용하는 방법에 대해 알아보았습니다.



'AngularJS' 카테고리의 다른 글

[Angularjs] angularjs click ngclick 버튼 클릭  (0) 2015.12.23
[Angularjs] filter, $filter, 필터링, 재정렬  (0) 2015.12.22
[Angularjs] repeat, ngrepeat, 배열, 배열 처리, 반복, 반복문  (0) 2015.12.15
[Angularjs] angularjs $scope 스코프  (0) 2015.12.14
[Angularjs] angularjs 시작하기, 기초, 샘플  (0) 2015.12.10

Angularjs 의 $scope에 대해서 알아보겠습니다.

$scope는 어플리케이션 모델을 나타내는 객체이고 $scope를 이용하여 변수 및 이벤트를 정의할 수 있습니다.

예제로 간단하게 $scope를 사용해보겠습니다.

- html 

<body ng-app="myApp">
  <div ng-controller="ctrl1">
    <input ng-model="txt">
    <span>{{txt}}</span>
    
    <button ng-click="click()">버튼 클릭</button>
  </div>
</body>

ng-click이라는 함수를 클릭 이벤트를 정의하는 angularjs 규칙입니다. 

다음에 ng-click에 대해서 자세하게 다루겠습니다.

ng-click을 이용하여 클릭 이벤트를 정의하고 $scope에서 이벤트를 구현합니다.


- javascript 


var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope) {
  $scope.txt = "테스트입니다";
  
  $scope.click = function() {
  	alert("버튼 클릭");
  }
});

$scope.txt = “테스트입니다”; // 초기 값을 지정할 수 있습니다.

$scope.click = function() {}; // 함수를 정의하여 이벤트를 만들수 있습니다.



예제 : 이동



'AngularJS' 카테고리의 다른 글

[Angularjs] angularjs click ngclick 버튼 클릭  (0) 2015.12.23
[Angularjs] filter, $filter, 필터링, 재정렬  (0) 2015.12.22
[Angularjs] repeat, ngrepeat, 배열, 배열 처리, 반복, 반복문  (0) 2015.12.15
[Angularjs] angularjs controller 컨트롤러  (0) 2015.12.14
[Angularjs] angularjs 시작하기, 기초, 샘플  (0) 2015.12.10
Angularjs를 시작하면 제일 많이나오는 샘플입니다.

Angularjs 양방향 데이터 바인딩이 되기 때문에 별도의 javascript코딩없이 적용되는 모습을 볼 수가 있습니다.

  
<div ng-app>
<input ng-model="txt">
<span>{{txt}}</span>
</div>
<div>
<input ng-model="txt">
<span>{{txt}}</span>
</div>


ng-app는 angularjs 라이브러리를 적용하겠다고 선언하는 부분입니다.


저는 <div ng-app> </div> div안에 선언해 놓았기 때문에 <div> 안에서만 angularjs 라이브러리가 적용이 됩니다.

아래는 ng-app이 선언이 안되었기 때문에 에러가 나는 걸 확인할 수 있습니다.


샘플을 통해서 확인하시면 더욱 이해가 빠르게 될꺼 같습니다.


예제 : 이동


'AngularJS' 카테고리의 다른 글

[Angularjs] angularjs click ngclick 버튼 클릭  (0) 2015.12.23
[Angularjs] filter, $filter, 필터링, 재정렬  (0) 2015.12.22
[Angularjs] repeat, ngrepeat, 배열, 배열 처리, 반복, 반복문  (0) 2015.12.15
[Angularjs] angularjs controller 컨트롤러  (0) 2015.12.14
[Angularjs] angularjs $scope 스코프  (0) 2015.12.14

+ Recent posts

티스토리툴바