이 단계에서는 사용자가 전화 목록이 표시되는 순서를 제어 할 수있는 기능을 추가합니다. 동적 분류는 이러한 방식으로 구현하여 새 모델 속성을 추가하고 반복자와 통합 한 다음 데이터 바인딩이 나머지 작업을 수행 할 수 있습니다.
작업 디렉토리를 재설정하십시오.
git 체크 아웃 -F 단계 -4
검색 상자 외에도 앱에는 전화 배열 순서를 제어 할 수있는 추가 다운 메뉴가 있습니다.
3 단계와 4 단계의 가장 중요한 차이점은 다음과 같습니다. Github의 완전히 차이를 볼 수 있습니다.
주형
app/index.html
검색 : <입력 ng-model = "query"> sort by : <ng-model = "OrderProp"> <옵션 값 = "name"> 알파벳 </옵션> <옵션 value = "age"> nexest </옵션> </select> <ul> <li ng-repeat = "휴대 전화 | 필터 | query | querpop"> { ^ {name}}}. <p> {{phone.snippet}} </p> </li> </ul>index.html에서 다음과 같은 변경 사항을 변경했습니다.
먼저 사용자가 제공하는 두 가지 정렬 방법을 선택할 수 있도록 OrderProp이라는 <elect> 태그를 추가했습니다.
그런 다음 필터 필터 후에 Orderby 필터를 추가하여 반복자에 입력하는 데이터를 처리하십시오. Orderby 필터는 배열을 입력으로, 복사본을 복사하고 복사를 다시 작성하여 반복자에게 출력합니다.
AngularJS는 선택 요소와 OrderProp 모델 사이에 양방향 바인딩을 만듭니다. 그런 다음 OrderProp은 Orderby 필터에 입력으로 사용됩니다.
3 단계에서 데이터 바인딩 및 반복자에 대해 논의했을 때, 데이터 모델이 변경 될 때 (예 : 사용자가 드롭 다운 메뉴에서 다른 순서를 선택할 때) AngularJS 데이터 바인딩이 자동으로보기를 업데이트합니다. 서투른 DOM 운영이 없습니다!
제어 장치
app/js/controllers.js :
함수 phonelistctrl ($ scope) {$ scope.phones = [{ "name": "nexus s", "snippet": "Nexus S.", "age": 0}, { "name": "motorola xoom ™가 Wi-fi", "스 니펫": "다음 세대,", ",", ",", "", "," ",", "", "," "," ",", "", "", "," ":", "", "", "," Xoom ™ ","스 니펫 ":"다음 세대, 차세대 태블릿 ","Age ": 2}]; $ scope.orderProp = 'age';}휴대 전화 배열 인 전화기 모델을 수정했습니다. 각 휴대폰 레코드에 연령 속성을 추가했습니다. 나이 속성에 따라 전화를 분류합니다.
OrderProp의 기본값을 나이로 만들기 위해 컨트롤러 코드에 줄을 추가했습니다. 기본값을 설정하지 않으면 사용자가 드롭 다운 메뉴에서 주문을 선택할 때 까지이 모델이 초기화되지 않은 상태로 유지됩니다.
이제 우리는 양방향 데이터 바인딩에 대해 이야기해야합니다. 브라우저에 앱이로드 될 때 드롭 다운 메뉴에서 "최신"이 선택됩니다. 컨트롤러에서 OrderProp을 'Age'로 설정했기 때문입니다. 따라서 바인딩은 모델에서 사용자 인터페이스, 즉 모델에서 뷰로의 데이터의 바인딩 방향으로 작동합니다. 드롭 다운 메뉴에서 "알파벳순"을 선택하면 데이터 모델이 동시에 업데이트되고 전화 목록 배열이 재정렬됩니다. 이 시점에서 데이터 바인딩은 다른 방향, 즉보기에서 모델에 대한 데이터의 결합으로 효과가 있습니다.
시험
우리가하는 변경은 단위 테스트 또는 엔드 투 엔드 테스트로 확인할 수 있습니다. 먼저 단위 테스트를 살펴 보겠습니다.
테스트/단위/Controllersspec.js :
설명 ( 'phonecat controllers', function () {spection ( 'phonelistctrl', function () {var scope, ctrl; prevereach (function () {scope = {}, ctrl = ctrl = new phonelistctrl (scope);}); it ( 'phones', function () (). }); 'OrderProp 모델의 기본값을 설정해야합니다.단위 테스트는 이제 기본값이 올바르게 설정되어 있는지 확인합니다.
우리는 Jasmine의 인터페이스를 사용하여 Phonelistctrl 컨트롤러를 이전의 Bloach 블록으로 추출합니다. 이는 모든 상위 블록의 모든 테스트에서 공유됩니다.
이전과 마찬가지로이 단위 테스트를 실행하면 ./scripts/test.sh 스크립트를 실행하면 다음 출력이 표시됩니다 (참고 : 브라우저에서 http : // localhost : 9876을 열고 테스트가 실행되기 전에 엄격한 모드를 입력해야합니다!) :) :) :) :
Chrome : 러너 리셋 ... 총 2 개의 테스트 (통과 : 2; 실패 : 0; 오류 : 0) (3.00 ms) 크롬 19.0.1084.36 Mac OS : 2 개의 테스트 실행 (통과 : 2; 실패 : 0) (3.00 ms)
이제 우리는 엔드 투 엔드 테스트에 관심을 돌립니다.
테스트/e2e/시나리오스 :
... ( '드롭 다운 선택 상자', function ()을 통해 전화 주문을 제어 할 수 있어야합니다. {// 데이터 세트를 좁히기 위해 데이터 세트를 좁히게하자 ( 'query'). enth ( 'tablet'); exper ( '. phones li', '전화 목록'). XOOM/U2122 "]); select ( 'OrderProp'). 옵션 ( 'alphabetical'); excles (Repeater ( '. phones li', '전화 목록'). 열 ( 'Phone.name')). toequal (["Motorola Xoom/U2122 ","Motorola XOOM/U2122 wi-fi "); ...});엔드 투 엔드 테스트는 옵션 상자의 분류 메커니즘이 올바른지 확인합니다.
이제 브라우저를 새로 고치고 엔드 투 엔드 테스트를 다시 실행하거나 AngularJS 서버에서 실행할 수 있습니다.
관행
PhoneListCtrl 컨트롤러에서 명령문 설정 OrderProp을 삭제하면 AngularJS가 드롭 다운 메뉴에서 빈 옵션을 일시적으로 추가하고 정렬 순서가 기본 정렬 (즉, 소송되지 않은)임을 알 수 있습니다.
index.html 템플릿에`{{{orderprop}} 바인딩을 추가하여 값을 실시간으로 표시합니다.
요약
이제 응용 프로그램에 대한 검색 기능을 제공하고 전체로 테스트했습니다. 5 단계 우리는 AngularJS의 서비스와 AngularJS가 종속성 주입을 사용하는 방법에 대해 배웁니다.
위의 것은 AngularJS 양방향 바인딩에 대한 정보의 편집입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 웹 사이트를 지원 해주셔서 감사합니다!