AngularJSでng-repeatとfilterを併用してテキストを絞り込むインクリメンタル検索を実装
searchTextという属性は、検索ボックスにテキストが入力されるたびにデータが変更されます。
ng-repeatのmemberの値をsearchTextでfilterをかけるため、テキストボックスに文字列が入力されるたびに動的に中身がフィルタリングされたデータになります。
○HTML
<div ng-controller="MainCtrl"> <input type="search" ng-model="searchText"> <ul ng-repeat="member in members | filter:searchText"> <li>{{member.name}} {{member.age}}</li> </ul> </div>
○JavaScript
'use strict'; var app = angular.module('myApp', []); app.controller('MainCtrl', function($scope) { $scope.members = [ { name: 'Takashi Shibuya', age: 31}, { name: 'Yoshida Katsutoshi', age:32}, { name: 'Akihiko Imura', age:33}, { name: 'Kawabe Atsuhiko', age: 32} ] });
- 作者: Brad Green,Shyam Seshadri,牧野聡
- 出版社/メーカー: オライリージャパン
- 発売日: 2014/04/18
- メディア: 大型本
- この商品を含むブログ (2件) を見る