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 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

이번에는 include사용방법을 알려드리겠습니다.

간단하게는 include_content.html을 가져오는 소스코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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 ng-app="">
before
<!-- 단순히 내용만 가져옵니다.(해당파일에는 배경색 스타일이 있지만 가져오지 못합니다.) -->
<div ng-include="'include_content.html'"></div>
 
</body>
</html>
 
 cs

 

include_content.html 입니다.

1
2
3
<body style="background-color:RED;font-size:15px;">
Adder
</body>
 cs

결과는 before

         Adder

로 출력이 됩니다.

이렇게 스타일이 존재하지만 스타일에 대해선 가져오지는 못하고, 내용만 가져오는 것을 확인할 수 있습니다.

감사합니다.

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

angularJS 간단한 routing템플릿  (0) 2016.06.29
angularJS Template Routing과 Directive를 같이 써봤어요  (0) 2016.06.29
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

티스토리툴바