検索フォームを作る

リスト内の文字列から検索条件に一致する文字列だけを表示する機能です。
Result タブをクリックして検索してみてください。

データの作成

Controller と Model を作成します。

var Controller = function($scope) {
    $scope.names = ['tanaka', 'sato', 'suzuki', 'nakamura', 'okano', 'yamada', 'ida'];
}

ビューの作成

まずはデータを一覧表示するだけのビューを作成します。
検索ボックスも作ります。

<div ng-app>
    <div ng-controller="Controller">
        検索：<input type="text"></input>
        <ul>
            <li ng-repeat="name in names">
                {{name}}
            </li>
        </ul>
    </div>
</div>

検索文字列の取得

検索ボックスに入力された文字列を取得します。
ng-model ディレクティブを使ってフォームに入力されたデータを取得出来ます。
入力された文字列を condition という名前で保存します。

ngModel - AngularJS
http://docs.angularjs.org/api/ng.directive:ngModel

<div ng-app>
    <div ng-controller="Controller">
        検索：<input type="text" ng-model="condition"></input>
        <ul>
            <li ng-repeat="name in names">
                {{name}}
            </li>
        </ul>
    </div>
</div>

フィルターを設定

検索文字列をフィルターとして ng-repeat に設定します。
ng-repeat 部分に | filter:condition を追加すると、文字列に condition が含まれるものだけがループへ入るようになります。

filter - AngularJS
http://docs.angularjs.org/api/ng.filter:filter

<div ng-app>
    <div ng-controller="Controller">
        検索：<input type="text" ng-model="condition"></input>
        <ul>
            <li ng-repeat="name in names | filter:condition">
                {{name}}
            </li>
        </ul>
    </div>
</div>

これで検索条件に引っかかる要素のみが表示されるようになります。