AngularJS 필터링 및 정렬 자세히 설명 및 예제 코드

이전에 AngularJS의 사용 방법을 배웠으니, 간단한 프로그램을 작성하여 쿼리 필터링 및 정렬 기능을 구현해 보겠습니다.

이 프로그램에서는 다음을 이해할 수 있습니다：

　　1 angularjs 필터

　　2 ng-repeat 사용법

　　3 컨트롤러 사용

　　4 데이터 바인딩

　　프로그램 설계 분석

　　먼저, 쿼리 필터링을 먼저 수행하려면 AngularJS의 필터 filter를 사용해야 합니다.

　　표현의 뒤에 파이프 명령 기호 |를 사용하여, 아래와 같은 방식으로 필터링 효과를 달성할 수 있습니다：

　　filter를 사용하여 필터링 작업을 수행하면, query는 쿼리 필터링에 입력된 문자열입니다.

　　와 유사하게, orderBy를 사용하여 정렬 기능을 구현할 수 있습니다：

　　위의 쿼리 및 정렬은 두 가지 변수, query와 order에 관련됩니다. 여기서는 ng-model을 통해 데이터 바인딩을 구현할 수 있습니다：

      Search:<input ng-model="query">
      정렬 방식:<select ng-model="order">
        <option value="name">name</option>
        <option value="age">age</option>
      </select>

　　AngularJS는 DOM을 기반으로 한 프레임워크 언어이므로, 리스너 및 이벤트 트리거를 구현할 필요가 없습니다. query에 있는 입력 상자가 어떤 변화가 발생하면도, 입력 상자와 아래의 표현이 표시되는 양방향 갱신을 일으킵니다!

　　다른 몇 가지 프레임워크와 비교했을 때, 문자열을 통해 DOM 노드 innerHTML에 추가하여 DOM에 추가되는 것은 AngularJS의 구현 방식이 모델과 뷰의 표시를 가속화합니다. 그리고 많은 불필요한 리스너 및 트리거와 같은 코드를 작성하는 것을 줄입니다. 실제로 스프링과 유사한 효과를 실현합니다~

　　데이터의 표시는 ng-repeat 구현. 웹 페이지가 ng-repeat할 때, 배열의 각 요소에 대해 태그를 복제하여 컴파일 및 해석합니다.　　　

　　　<ul class="persons">
        <li ng-repeat="person in persons | filter:query | orderBy:order">
          {{person.name}}
          {{person.age}}
        </li>
      </ul>

　　나머지 작업은 script에서 perons 배열의 초기화가 필요합니다：　　　

  <div ng-controller="ctl">
          ...
    </div>
    <script type="text/javascript">
      function ctl($scope){
        $scope.persons = [
          {"name":"xingoo","age":25},
          {"name":"zhangsan","age":18},
          {"name":"lisi","age":20},
          {"name":"wangwu","age":30}
        ];
        $scope.order = "age";
      }
    </script>

　　코드 및 결과

　　전체 코드를 붙여넣습니다：

!doctype html>
<html ng-app>
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="ctl">
      Search:<input ng-model="query">
      정렬 방식:<select ng-model="order">
        <option value="name">name</option>
        <option value="age">age</option>
      </select>
      <ul class="persons">
        <li ng-repeat="person in persons | filter:query | orderBy:order">
          {{person.name}}
          {{person.age}}
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      function ctl($scope){
        $scope.persons = [
          {"name":"xingoo","age":25},
          {"name":"zhangsan","age":18},
          {"name":"lisi","age":20},
          {"name":"wangwu","age":30}
        ];
        $scope.order = "age";
      }
    </script>
  </body>
</html>

　　사용 결과:

　　기본적으로 age로 정렬됩니다:

　　선택을 통해 name으로 정렬할 수 있습니다

　　문자를 다시 입력할 때, 일부 옵션을 자동으로 검색 필터링할 것입니다

위는 AngularJS 필터링 및 정렬에 대한 자료 정리입니다. 이후 추가 자료를 계속 추가할 예정입니다. 많은 관심과 지지에 감사합니다!

선언: 본 문서의 내용은 인터넷에서 가져왔으며, 저작권자는 모두입니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 본 사이트는 소유권을 가지지 않으며, 인공적인 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있을 경우, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（메일을 보내는 경우, #을 @으로 변경하여 신고하시고, 관련 증거를 제공하시면, 해당 내용이 확인되면 즉시 해당 내용을 삭제할 것입니다。）

기본 가이드

추천해 드립니다