6

私はテーブルを持っています。選択ボックスで選択された値に応じてテーブルをフィルタリングしたい。比較値は、選択ボックスでは {{pipe.pipe_id}}、テーブルでは {{dimension.pipe_id}} です。これには簡単な解決策があると思いますか？なにか提案を？

Pipe:
    <select  id="select01">
        <option ng-repeat="pipe in pipes">{{pipe.code}} - {{pipe.title_en}}</option>
    </select>  


    <table class="table table-striped">
        <thead>
            <tr>
                <th>Pipe</th>
                <th>Size</th>
                <th>Inner diameter</th>
                <th>Outer diameter</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="dimension in dimensions" >
                <td>{{dimension.pipe_id}}</td>
                <td>{{dimension.nominalsize}}</td>
                <td>{{dimension.innerdiameter}}</td>
                <td>{{dimension.outerdiameter}}</td>
            </tr>
        </tbody>
    </table>
4

2 に答える 2

9

ng-filterの使用をお勧めします。

このリンクは、to-do リストを使用した簡単な例です。 ng-filter を使用した jsfiddle

使用している入力をバインドする必要がありますng-model="varname"

ng-filter のデフォルトは、配列内のすべてのフィールドです。単一の列にフィルター処理するか、コントローラーの関数を指すことができます。

検索フィールド

<select ng-model="searchparam">
   <option value="1">One</option>
   <option value="2">Two</option>
</select>

単一の列を検索するには

<select ng-model="searchparam.columnOne">
   <option value="1">One</option>
   <option value="2">Two</option>
</select>

繰り返しセクション
(入力で特定の列が指定されている場合でも、フィルター モデルは同じままです)

<tr ng-repeat="dimension in dimensions | filter: searchparam">
     <td>{{dimension.columnOne}}</td>
     <td>{{dimension.columnTwo}}</td>
</tr>
于 2013-05-24T15:08:02.000 に答える
1

ng-filterとフィルターを探していると思いますfilter: http://docs.angularjs.org/api/ng.filter:filter

于 2013-05-24T14:10:34.060 に答える