AngularJS

[Angularjs] repeat, ngrepeat, 배열, 배열 처리, 반복, 반복문

dreamjy 2015. 12. 15. 10:05

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를 이용하여 필터링 하는 부분을 알아보겠습니다.