336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
이번에는 Select에 대해서 처리하는 방법을 알아볼려고 합니다.
소스코드 확인 들어가겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41 |
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- 라우팅과 angularJS기본파일입니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<!-- app이름과 controller이름을 설정합니다. -->
<div ng-app="myApp" ng-controller="myCtrl">
<!-- options으로 select에 풀어넣습니다. -->
<!-- ng-model로 변수를 치환합니다. -->
<!-- JSON으로 나타낸 것을 처리하기 위한것이고, x키, y는 값입니다. -->
<select ng-model="selectedLocation" ng-options="x for (x, y) in info">
</select>
<!-- 선택한 것에 대해서 각각 해당하는 값을 출력합니다. -->
<div>지역: {{selectedLocation.location}}</div>
<div>도시: {{selectedLocation.city}}</div>
<div>음식: {{selectedLocation.food}}</div>
</div>
<script>
//app연결합니다.
var app = angular.module('myApp', []);
//controller를 연결합니다.
//안에 info라는 변수에 json형식으로 넣습니다.
app.controller('myCtrl', function($scope) {
$scope.info = {
info01 : {location : "korea", city : "souel", food : "kimch"},
info02 : {location : "korea", city : "jeju", food : "water"},
info03 : {location : "japan", city : "tokyo", food : "susi"}
}
});
</script>
</body>
</html>
|
cs |
결과는 info01을 클릭했다면 소속되어있는 값들이 하나씩나옵니다.
감사합니다.