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

집

웹 프론트엔드

JS 튜토리얼

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

May 16, 2016 pm 03:03 PM

angular.js

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

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

로그인 후 복사

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

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

로그인 후 복사

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

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

로그인 후 복사

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

본 웹사이트의 성명

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