이전에 AngularJS의 사용법에 대해 배웠으므로 쿼리 필터링 및 정렬의 기능을 구현하기 위해 작은 프로그램을 작성하겠습니다.
이 프로그램에서 배울 수 있습니다.
1 angularjs 필터
2 ng-repeat 사용 방법
3. 컨트롤러 사용
4 데이터 바인딩
프로그래밍 분석
먼저 필터를 먼저 쿼리하려면 AngularJS에서 필터 필터를 사용해야합니다.
파이프 라인 명령 문자 | 표현식 직후에 바로 다음 필터링 효과를 달성하기 위해 다음 쓰기 방법을 따르십시오.
{{사람 | 필터 : 쿼리}}
필터를 사용하여 필터링을 구현하면 쿼리가 필터링 할 때 입력 한 문자열입니다.
마찬가지로 정렬 함수는 Orderby를 사용하여 달성 할 수 있습니다.
{{사람 | 필터 : 쿼리 | Orderby : Order}}
위의 쿼리 및 정렬에는 두 가지 변수, 쿼리 및 순서가 포함됩니다. 여기서는 NG 모델을 직접 사용하여 데이터 바인딩을 구현할 수 있습니다.
검색 : <입력 ng-model = "query"> sort by : <select ng-model = "order"> <옵션 값 = "name"> name </옵션> <옵션 값 = "age"> age "> age </옵션> </select>
AngularJS는 DOM 기반 프레임 워크 언어이므로 청취자와 이벤트 트리거를 구현할 필요가 없습니다. 쿼리가있는 입력 상자의 변경 사항이 있으면 입력 상자와 다음 표현식이 트리거되어 입력 상자와 다음 표현식을 새로 고쳐집니다!
다른 프레임 워크와 비교하여 문자열을 기반으로 DOM 노드 내부 HTML을 통해 DOM에 추가됩니다. AngularJS의 구현은 모델과 뷰의 표시를 가속화합니다. 또한 불필요한 청취자 및 트리거와 같은 코드 작성을 줄이고 봄과 같은 효과를 진정으로 달성합니다 ~
데이터 프리젠 테이션은 NG- 반복을 통해 달성 할 수 있습니다. 웹 페이지가 ng-repeat에 구문 분석되면 컴파일 및 구문 분석을 위해 각 요소에 대해 태그가 클로닝됩니다.
<ul> <li ng-repeat = "사람의 사람 | 필터 : 쿼리 | orderby : order"> {{person.name}} {{person.age}} </li> </ul>나머지 작업은 스크립트에서 Perons 어레이를 초기화하는 것입니다.
<div ng-controller = "ctl"> ... </div> <script type = "text/javaScript"> function ctl ($ scope) {$ scope.persons = [{ "name": "Xingoo", "age": 25}, { "Zhangsan", "Age": 18}, { "lisi" ", { "이름": "Wangwu", "Age": 30}]; $ scope.order = "Age"; } </스크립트>코드 및 결과
마지막으로 모든 코드가 게시됩니다.
<! 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. </head> <body> <div ng-controller = "ctl"> 검색 : <input ng-model = "query"> sort by : <select ng-model = "order"> <옵션 value = "name"> name </옵션 value = "age"> age </옵션> <ul> <ul> <li ng-repeat | persons | quents | query : query : "> {{person.name}} {{person.age}} </li> </ul> </div> <script type = "text/javaScript"> function ctl ($ scope) {$ scope.persons = [ "이름": "Xingoo", "age": 25}, { "Zhangsan", ":": ":" ":" ":": { "name": "lisi", "age": 20}, { "name": "wangwu", "age": 30}]; $ scope.order = "Age"; } </script> </body> </html>결과 사용 :
기본적으로 나이를 사용하여 정렬하십시오.
선택하면 이름 정렬을 사용할 수 있습니다
문자를 입력하면 일부 옵션이 쿼리를 통해 자동으로 필터링됩니다.
위는 AngularJS 필터링 및 정렬에 대한 정보 분류입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 웹 사이트를 지원 해주셔서 감사합니다!