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}
  ]

});

AngularJSアプリケーション開発ガイド

AngularJSアプリケーション開発ガイド