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
<!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>
 
<!-- controller와 app을 생성합니다. -->
<ul ng-app="myApp" ng-controller="moneyCtrl">
 
<!-- menuMoney라는 배열을 차례대로 뿌립니다. -->
<li ng-repeat="x in menuMoney">
    <!-- repeat를 통해서 들어온 x를 money형식으로 포멧팅해서 출력합니다. -->
    {{x | money}}
</li>
</ul>
 
<script>
var app = angular.module('myApp', []);
 
/* 어떤 값을 포멧해서 넣어주는 함수이고, 어떤 데이터를 포멧할때 그 데이터를 num자리에 넣어서 실행합니다. */
app.filter('money', function() {
    //원화로 포멧해주는 함수입니다.
    return function(num) {
        var len, point, str;
        
        point = num.length % 3 ;
        len = num.length;  
       
        str = num.substring(0, point);  
        while (point < len) {  
            if (str != "") str += ",";  
            str += num.substring(point, point + 3);  
            point += 3;  
        }  
        str = "\\"+str;
        return str;
    };
});
//controller를 생성합니다. menuMoney라는 변수를 생성해서 배열로 넣어줍니다.
app.controller('moneyCtrl', function($scope) {
    $scope.menuMoney = [
        '1234',
        '1000',
        '1000000',
        '500000',
        '40000',
        '9000000000',
        '10203050'
        ];
});
</script>
</body>
</html>
 
 cs

 

감사합니다.

 

 

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

angularJS filter 검색을 편하게 해주는 filter  (0) 2016.06.30
angularJS Filter간단한 사용법  (0) 2016.06.30
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

이 예제는 text박스에 입력된 것을 변수화 시쳐서 그것을 repeat에 적용해서 그것을 포함하는 값만 출력하는 예제입니다.

하지만 이 예제는 해당버전으로는 한글이 지원되지 안아서 아쉬운 점이 조금 있습니다.

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
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
 
<!-- 라우팅과 angularJS기본파일입니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body>
 
<!-- app이름과 controller이름을 설정합니다. -->
<div ng-app="myApp" ng-controller="clothesCtrl">
 
 
<!-- test변수로 묶어줍니다. -->
<p><input type="text" ng-model="test"></p>
 
<ul>
    <!-- filter:test는 filter는 포함되어 있는 값만 뿌려주는데요. test변수에 있는 값들을 찾아서 뿌려주는 역할을 합니다. -->
  <li ng-repeat="value in clothes | filter:test">
    {{ value }}
  </li>
</ul>
 
</div>
 
<script>
/* app과 controller를 활성화하고, names에 값을 넣어줍니다. */
angular.module('myApp', []).controller('clothesCtrl', function($scope) {
    $scope.clothes = [
        '청바지',
        '용지',
        '스포츠용품',
        '여성의류',
        '청자켓',
        '정장바지',
        '나팔바지',
        '정장슈트',
        '남성의류'
    ];
});
</script>
 
 
</body>
</html>
 
 cs

직접 해보시면 알겠지만 한글은 반응이 없고, 영어는 작동을 잘하는 것을 확인할 수 있습니다.

 

감사합니다.

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

angularJS 사용자 정의함수 Filtering  (0) 2016.06.30
angularJS Filter간단한 사용법  (0) 2016.06.30
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

+ Recent posts

티스토리툴바