앵귤러js ng-model ng-init ng-repeat
ng-app : angularjs앱에 시작을 알림
ng-init : 앱 데이터들을 초기설정함
ng-model: 변수 설정
ng-repeat : 데이터 셋에 있는 아이템을 하나씩 보여줌
예제를 보면 정말 어렵지 않습니다.
<html>
<head>
<meta charset="UTF-8">
<title>앵귤러js</title>
</head>
<body>
<div ng-app="" ng-init="menu=[{price:'1000', name:'오징어'}, {price:'6000', name:"김밥"}, {price:'2000', name:'순대'}]">
<p>이름 : <input type="text" ng-model="nm"></p>
<p><span ng-bind="nm"></span>님</p>
<ul>
<li ng-repeat="food in menu">
{{ '메뉴: ' + food.name + ' 가격 : ' + food.price + ' 원'}}
</li>
</ul>
</div>
</body>
</html>
ng-init는 초기 값을 설정하는 것입니다.
예제를 보면 초기에 오징어, 김밥, 순대에 가격을 셋팅을 하죠
ng-model과 ng-bind가 함께 쓰이는 데요.
ng-model에 입력한 값이 ng-bind에 출력되게 됩니다.
이것은 앵귤러js 1일차 강좌에서 확인 하셨을 것입니다.
ng-repeat는 회전을 하면서 값을 한개씩 출력하는 것입니다.
ng-repeat="food in menu"
ng-init="menu .....
menu에 있는 값을 한개씩 food에 넣고
{{ '메뉴: ' + food.name + ' 가격 : ' + food.price + ' 원'}}
이 부분에서 출력하게 됩니다.
ng-app : angularjs앱에 시작을 알림
ng-init : 앱 데이터들을 초기설정함
ng-model: 변수 설정
ng-repeat : 데이터 셋에 있는 아이템을 하나씩 보여줌
예제를 보면 정말 어렵지 않습니다.
<html>
<head>
<meta charset="UTF-8">
<title>앵귤러js</title>
</head>
<body>
<div ng-app="" ng-init="menu=[{price:'1000', name:'오징어'}, {price:'6000', name:"김밥"}, {price:'2000', name:'순대'}]">
<p>이름 : <input type="text" ng-model="nm"></p>
<p><span ng-bind="nm"></span>님</p>
<ul>
<li ng-repeat="food in menu">
{{ '메뉴: ' + food.name + ' 가격 : ' + food.price + ' 원'}}
</li>
</ul>
</div>
</body>
</html>
ng-init는 초기 값을 설정하는 것입니다.
예제를 보면 초기에 오징어, 김밥, 순대에 가격을 셋팅을 하죠
ng-model과 ng-bind가 함께 쓰이는 데요.
ng-model에 입력한 값이 ng-bind에 출력되게 됩니다.
이것은 앵귤러js 1일차 강좌에서 확인 하셨을 것입니다.
ng-repeat는 회전을 하면서 값을 한개씩 출력하는 것입니다.
ng-repeat="food in menu"
ng-init="menu .....
menu에 있는 값을 한개씩 food에 넣고
{{ '메뉴: ' + food.name + ' 가격 : ' + food.price + ' 원'}}
이 부분에서 출력하게 됩니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 1199 |
반응형웹
반응형웹 스크립트로 바꾸기
3
|
| 1197 |
반응형웹
반응형 레이아웃의 첫걸음 예제소스
|
| 1181 |
부트스트랩
부트스트랩 MIT 라이센스?
3
|
| 1165 |
부트스트랩
data-toggle 체크박스 활용
|
| 785 | |
| 455 | |
| 426 | |
| 311 | |
| 287 |
반응형웹
7. 서버측 반응형 웹 접근방법
17
|
| 247 |
반응형웹
6. 반응형 이미지
46
|
| 237 |
반응형웹
잠깐글2. 반응형 테이블
12
|
| 236 | |
| 220 |
반응형웹
5. 반응형 네비게이션/메뉴
25
|
| 215 | |
| 205 |
반응형웹
4. 반응형 레이아웃
21
|
| 179 |
반응형웹
3. 반응형 그리드
23
|
| 167 | |
| 133 | |
| 119 |
반응형웹
반응형 웹 강좌를 시작하며
33
|
| 108 | |
| 98 | |
| 86 | |
| 82 | |
| 64 | |
| 50 | |
| 46 | |
| 34 | |
| 1 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기