angular.jsをチュートリアルから学ぶ step3 Filtering Repeaters
- 2013.10.26
- javascript Prog
- angular.js, フレームワーク
step2ではオブジェクトをテンプレート内に表示しました。
今回はフォームを利用してフィルタリングを行って表示をします。
Step3との差分
絞込フォームの追加
<input ng-model="query">
ng-repeatへfilter:queryを追加
<ul>
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
ソースを読むと何となく分かるのですが、
inputへ入力した文字で動的にリストの中身を検索して動的に表示をしています。
こんな感じでフォームに入力した文字列を探して表示を行います。
ソース全体
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="container" ng-app="phonecatApp">
<div ng-controller="PhoneListCtrl">
<input ng-model="query">
<h3>Phone Gallery: {{query}}</h3>
<p>totalphone: {{phones.length}}</p>
<ul>
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
$scope.phones = [
{'name': 'Nexus S', 'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM with WiFi', 'snippet': 'The Next, Next Generation tablet.'},
{'name': 'Motorola XOOM', 'snippet': 'The Next, Next Generation tablet.'}
];
});
</script>
</body>
</html>
-
前の記事
angular.jsをチュートリアルから学ぶ step2 Angular Templates 2013.10.24
-
次の記事
angular.jsをチュートリアルから学ぶ step4 Two-way Data Binding 2013.10.26
コメントを投稿するにはログインしてください。