AngularJS 지시자, Filter

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
     <li ng-repeat="x in names">
      {{ x }}
     </li>
   </ul>
</div>

</div>

<script>
 function personController($scope) {
     $scope.firstName = "John";
     $scope.lastName = "Doe";
 }
</script> 

ng-repeat지시자는 html 엘리먼트를 반복하는 반복문 개념이다.

예제에서 names배열데이터를 가져와서

li엘리먼트에 ng-repeat지시자를 사용해서 출력해주고 있다.

<div ng-app="" ng-init="names=[
 {name:'Jani',country:'Norway'},
 {name:'Hege',country:'Sweden'},
 {name:'Kai',country:'Denmark'}]">

<ul>
   <li ng-repeat="x in names">
     {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div> 

ng-repeat에 대한 소스지만 객체 데이터 배열을 대상으로 사용하는 법을 알려주고 있다.

AngularJS Filters

필터명	설명
filter	포함되는 정보만을 찾아준다 필터링..
lowercase	영문일 경우 대문자를 소문자로 변경해준다.
orderBy	배열을 정렬
uppercase	영문일 경우 소문자를 대문자로 변경해준다.

<div ng-app="">

<input type="text" ng-model="name" />

<p>The name is {{ name | uppercase }}</p>

</div>

위 예제는 ng-model="name"의 입력이 모두 대문자로 입력이된다.

<div ng-app="" ng-controller="personController">

<p>Filtering input:</p>

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in personinfo | filter:test | orderBy:'age'">
    {{ (x.name | uppercase) + ', ' + x.age}}
  </li>
</ul>

</div>

<script>
function personController($scope){
 $scope.personinfo = [{name:'wonbin',age:40}
     ,{name:'choonie',age:30}
    ,{name:'lockhwan',age:31}
     ,{name:'grandmother',age:80}];
}
</script>

위 예제는 AngularJS의 필터 filter와 필터 orderBy를 사용하고 있다.

filter:test를 입력함으로써 ng-model이 test인 엘리먼트의 입력값에 따라 li엘리먼트의 리스트를 필터링 한다.

orderBy는 age속성에 따라 오름차순 정렬을 하고있다.