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을 클릭했다면 소속되어있는 값들이 하나씩나옵니다.

감사합니다.

 

 

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

이번에는 내용만 바뀌는 템플릿 소스를 보겠습니다.

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
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
 
<!-- 라우팅과 angularJS기본파일입니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
 
<!-- app이름을 설정합니다. -->
<body ng-app="myApp">
 
    <p><a href="#/">Main</a></p>
    
    <a href="#another">another</a>
    
    <div ng-view></div><!-- route가 되면 나올 공간을 가리킵니다. -->
 
<script>
//앱과 routing을 변수에 넣었습니다.
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    /* 처음에 나올 페이지입니다. */
    .when("/", {
        templateUrl : "main.htm"    /* 나올 템플릿 파일을 가리킵니다. */
    })
    /* another클릭시에 나옵니다. */
    .when("/london", {
        templateUrl : "another.htm"    /* 나올 템플릿 파일을 가리킵니다. */
    })
});
</script>
 
</body>
</html>
 
 cs

소스에 설명은 다 있습니다.

감사합니다.

 

 

'ANGULARJS > template' 카테고리의 다른 글

angularJS 내용만 가져오는 Include 사용법  (0) 2016.06.30
angularJS Template Routing과 Directive를 같이 써봤어요  (0) 2016.06.29
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 

안녕하세요.

 

이번에는 템플릿에 대해서 알아보겠습니다.

템플릿을 관리하는 소스코드입니다.

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
 
<!-- 라우팅과 angularJS기본파일입니다. -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
 
<!-- app이름과 controller이름을 설정합니다. -->
<body ng-app="myApp" ng-controller="myCon">
 
<table width="100%">
    <tr>
        <td>
            <!-- directive대상이될 태그입니다. -->
            <it-menu></it-menu>
        </td>
        <td width="90%">
            <!-- 라우팅하면 보여질 곳 입니다. -->
            <div ng-view></div>
        </td>
    </tr>
</table>
 
<script>
(function(angular) {
    //app과 라우팅을 연결합니다.
    var app = angular.module("myApp", ["ngRoute"]);
    
    
    /* my-tabs 태그에 대한 배치를 활성화 */
    app.directive('itMenu', function() {
        return {
           restrict: 'E',        //
           transclude: true,    //파일포함의 여부 입니다.
           scope: {},            //변수선억지역 입니다.
           /* scope를 넣어서 각각 select,addPane함수를 만들어줍니다. */
           controller: ['$scope', function($scope) {
                  
           }],
           
           templateUrl: 'menu.html'
        }
    });
    
    //라우팅부분입니다.
    app.config(function($routeProvider) {
        $routeProvider
        .when("/", {
            templateUrl : "main.html"    //처음에 main.html을 불러옵니다.
        })
        .when("/color", {
            templateUrl : "color.html"    // /color조건을 만족시키면 color.html로 이동합니다.
        })
    });
    
    //이벤트를 처리하기 위한 controller를 만들었습니다.
    app.controller("myCon",  function($scope){
        
        // testAlert함수입니다. alert와 변수를 넣어줍니다.
        $scope.testAlert = function(scope){
            alert("DDD");
            $scope.add = "추가되었습니다.";
        }
    });
 
})(window.angular);
</script>
 
</body>
</html>
 
 
 
 cs

 

main.html에 해당하는 페이지입니다. 처음 content단에 나올 소스코드입니다.

1
2
<!-- 클릭함수와 add변수를 출력하고 있습니다. -->
<div ng-click="testAlert()">글내용입니다. {{add}} </div>
 cs

 

color를 눌르면 나올 페이지입니다. 간단하게 main인지, color인지 구분만 할 수 있도록 해놓은 코드입니다.

1
color페이지입니다.
 cs

 

이렇게 처리했습니다.

감사합니다.

'ANGULARJS > template' 카테고리의 다른 글

angularJS 내용만 가져오는 Include 사용법  (0) 2016.06.30
angularJS 간단한 routing템플릿  (0) 2016.06.29

+ Recent posts

티스토리툴바