IT/앵귤러js

AngularJS Filters에 디렉 티브에 필터 추가

조원태 2017. 8. 8. 13:55
반응형

AngularJS Filters에 디렉 티브에 필터 추가


[디렉 티브에 필터 추가]


필터는 ng-repeat파이프 문자 |와 필터 를 사용하여 지시문에 추가됩니다


orderBy필터 배열을 정렬한다 :


<div ng-app="myApp" ng-controller="namesCtrl">


<ul>

  <li ng-repeat="x in names | orderBy:'country'">

    {{ x.name + ', ' + x.country }}

  </li>

</ul>


</div>


전체소스

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>


<div ng-app="myApp" ng-controller="namesCtrl">


<p>Looping with objects:</p>

<ul>

  <li ng-repeat="x in names | orderBy:'country'">

    {{ x.name + ', ' + x.country }}

  </li>

</ul>


</div>


<script>

angular.module('myApp', []).controller('namesCtrl', function($scope) {

    $scope.names = [

        {name:'Jani',country:'Norway'},

        {name:'Carl',country:'Sweden'},

        {name:'Margareth',country:'England'},

        {name:'Hege',country:'Norway'},

        {name:'Joe',country:'Denmark'},

        {name:'Gustav',country:'Sweden'},

        {name:'Birgit',country:'Denmark'},

        {name:'Mary',country:'England'},

        {name:'Kai',country:'Norway'}

        ];

});

</script>


</body>

</html>

[예제결과]

Looping with objects:

  • Joe, Denmark
  • Birgit, Denmark
  • Margareth, England
  • Mary, England
  • Jani, Norway
  • Hege, Norway
  • Kai, Norway
  • Carl, Sweden
  • Gustav, Sweden


반응형