Angular.js에서 ng-app 및 ng-model 사용 팁을 검토합니다

집

웹 프론트엔드

JS 튜토리얼

Angular.js에서 ng-app 및 ng-model 사용 팁을 검토합니다_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:03 PM

angular.js

Angular.js의 index.html의 간단한 구조:

<!doctype html> 
<html ng-app> 
  <head> 
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 
  </head> 
  <body> 
    Your name: <input type="text" ng-model="yourname" placeholder="World"> 
    <hr> 
    Hello {{yourname || 'World'}}! 
  </body> 
</html>

로그인 후 복사

ng-app 속성 은angular.js의 범위를 표시하는angular.js의 플래그 문입니다. ng-app은 html 태그에 추가된 위와 같이 여러 위치에 추가될 수 있으며 이는 각도 스크립트가 전체 페이지에서 작동함을 나타냅니다. ng-app 속성을 로컬로 추가할 수도 있습니다. 예를 들어 특정 div 내에 ng-app을 추가하면 전체 div 영역이 각도 스크립트를 사용하여 구문 분석되고 다른 위치는 각도 스크립트로 구문 분석되지 않음을 나타냅니다.
ng-model은 데이터 모델을 구축한다는 의미입니다. 여기에서는 이름을 입력하는 입력 상자에서 yourname 데이터 모델을 정의합니다. 모델이 정의되면 {{}}를 활용하여 아래에서 모델을 호출할 수 있습니다. 이로써 데이터 바인딩이 완료됩니다. 입력 상자에 내용을 입력하면 아래의 Hello 문 블록에 동기화됩니다.
ng-model이 정의한 데이터 모델은 위의 시나리오뿐만 아니라 다양한 상황에서 널리 사용될 수 있습니다.
1. 검색 기능을 구현하기 위한 필터 설정
다음 코드에서는 간단한 데이터 모델 정의 + 필터를 사용하여 목록 검색 기능을 완성합니다. (중국 사이트의 예제 코드이므로 불명확한 부분은 먼저 걱정하지 않으셔도 됩니다.)

<div class="container-fluid"> 
 <div class="row-fluid"> 
  <div class="span2"> 
   Search: <input ng-model="query"> 
  </div> 
  <div class="span10"> 
   <ul class="phones"> 
    <li ng-repeat="phone in phones | filter:query"> 
     {{phone.name}} 
    <p>{{phone.snippet}}</p> 
    </li> 
   </ul> 
    </div> 
 </div> 
</div>

로그인 후 복사

위 코드에서 데이터 모델 쿼리는 검색창의 입력 태그에 바인딩됩니다. 이러한 방식으로 사용자가 입력한 정보는 쿼리 데이터 모델에 동기화됩니다. 다음 li에서는 filter:query를 사용하여 목록의 데이터 필터링 기능을 구현하고 사용자가 입력한 정보를 기반으로 필터링을 수행할 수 있습니다.
2. 목록 정렬 기능을 구현하려면 orderBy를 설정하세요
다음 코드에서는 필터와 마찬가지로 orderBy를 사용하여 목록에 정렬 기능을 추가합니다.

Search: <input ng-model="query"> 
Sort by: 
<select ng-model="orderProp"> 
 <option value="name">Alphabetical</option> 
 <option value="age">Newest</option> 
</select> 
<ul class="phones"> 
 <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> 
  {{phone.name}} 
  <p>{{phone.snippet}}</p> 
 </li> 
</ul>

로그인 후 복사

위는 ng-app 및 ng-model의 사용 기술에 대한 내용입니다. 과거를 복습하고 새로운 것을 배우면서 뭔가를 얻을 수 있기를 바랍니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.