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

 

안녕하세요.

이번에는 angularJS Filter에 대해서 할려고합니다.

 

밑에 있는 것은 소스코드예요.

사용할만한 형식도 대부분 영어지만 추가해두었어요. 필요한것은 확인해 주세요.

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
<!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>
 
<!-- 
currency Format a number to a currency format.
•date : Format a date to a specified format.
•filter : Select a subset of items from an array.
•json : Format an object to a JSON string.
•limitTo : Limits an array/string, into a specified number of elements/characters.
•lowercase : Format a string to lower case.
•number : Format a number to a string.
•orderBy : Orders an array by an expression.
•uppercase : Format a string to upper case.
•currency : 화폐입니다. 달러로 필터처리를 해줘서 사용자 필터를 추천해드립니다.
 -->
<div ng-app="myApp" ng-controller="sampleCtrl">
 
<!-- lastName에 uppercase(대문자)를 적용합니다. -->
<p>{{ choiceWord | uppercase }}</p>
 
<!-- lastName에 uppercase(소문자)를 적용합니다. -->
<p>{{ choiceWord | lowercase }}</p>
 
</div>
 
<script>
//controller를 생성합니다.
angular.module('myApp', []).controller('sampleCtrl', function($scope) {
    $scope.choiceWord = "Car";    //choiceWord에 Car를 넣어줍니다.
});
</script>
 
</body>
</html>
 
 cs

결과는 CAR

    car

감사합니다.

 

 

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

angularJS 사용자 정의함수 Filtering  (0) 2016.06.30
angularJS filter 검색을 편하게 해주는 filter  (0) 2016.06.30
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

+ Recent posts

티스토리툴바