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 |