1

ユーザーがチェック ボックスを使用して結果配列をフィルタリングできるようにしようとしています。

私はAngular JSフレームワークに取り掛かったばかりで、私のシナリオにどのようにアプローチするかよくわかりません.

私がやっていることは、私がそれに近づいている方法で可能かどうか、または単にカスタムフィルター関数を書く必要があるかどうかを調べようとしています.

私の問題を説明するために、簡単な jsfiddle をまとめました。

http://jsfiddle.net/arkleyjoe/7jUp6/

マークアップは次のとおりです。

<div ng-app="">
<div ng-init="friends = [{name:'John', phone:'555-1276'},
                       {name:'Mary', phone:'800-BIG-MARY'},
                       {name:'Mike', phone:'555-4321'},
                       {name:'Adam', phone:'555-5678'},
                       {name:'Julie', phone:'555-8765'}]"></div>Exclude Johns
<input ng-model="search.name" name="name" type="checkbox"
ng-true-value="!John" ng-false-value="">
<br>Exclude Adams
<input ng-model="search.name" name="name" type="checkbox"
ng-true-value="!Adam" ng-false-value="">
<br>
<table id="searchObjResults">
    <tr>
        <th>Name</th>
        <th>Phone</th>
        <tr>
            <tr ng-repeat="friend in friends | filter:search">
                <td>{{friend.name}}</td>
                <td>{{friend.phone}}</td>
                <tr>
</table>
</div>

この例では、チェック ボックスを使用してリストから特定の名前をフィルター処理しています。どちらかを選択しても問題なく動作しますが、両方を選択したいです。Angular JS は、実際には 2 つのボックスを選択できないようにするため、ここで明らかに舞台裏で何かを行っています。

4

1 に答える 1

1

search.name両方のチェックボックスに1つのプロパティをバインドしようとしているため、一方をチェックすると、もう一方が設定した値が上書きされます。両方のチェックボックス値でフィルタリングする場合は、ng-model式を異なるモデルプロパティに割り当てる必要があります。

コントローラでメソッドを作成し、それをfilter式に渡すことができます。このメソッドは、リスト内のアイテムごとに1回呼び出されます。関数がtrueを返す場合、アイテムは最終結果に追加されます。ここにカスタムフィルター式を書くことができます。ここでフィルターのドキュメントを参照してください

于 2013-03-09T11:21:51.000 に答える