Angular.js에서 ng-app 및 ng-model 사용 팁을 검토합니다_AngularJS
- WBOY원래의
- 2016-05-16 15:03:531610검색
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의 사용 기술에 대한 내용입니다. 과거를 복습하고 새로운 것을 배우면서 뭔가를 얻을 수 있기를 바랍니다.