4

http://bazalt-cms.com/ng-table/example/4の指示に従って、ng-tableにフィルターボックスを作成します

私のコードは例と同じです:htmlでフィルターを作成します:

<table ng-table="tableParams" show-filter="true" class="table">
    <tr ng-repeat="user in $data">
        <td data-title="'Name'" filter="{ 'name': 'text' }">

レイアウトが表示されます。

ここに画像の説明を入力

しかし、次のように、テーブルにフィルター ボックスを入れたくありません。

ここに画像の説明を入力

ファイラーは、フィルター ボックスのテーブルの私のコードの上にあります。

<input type="text" ng-model="filter.name" />
<table ng-table="tableParams" show-filter="false" class="table">
    <tr ng-repeat="user in $data">
        <td data-title="'Name'" filter="{ 'name': 'text' }">
            {{user.name}}
        </td>

... ng-model="filter.name" を使用してバインドしますが、機能しません...

私の想像力を実現する方法はありますか？

4

3 に答える 3

10

パムは間違っています。ngtable や、既にフィルター処理を行ったコンポーネントの後でフィルター処理を行うべきではありません。そうしないと、予期しないことが起こります。

テーブル パラメーターを変更し、フィルター オブジェクトを ref でバインドするだけです。

$scope.filter = {name: 'T'};
$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10,          // count per page
    filter: $scope.filter
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        // use build-in angular filter
        var orderedData = params.filter() ?
               $filter('filter')(data, params.filter()) :
               data;

        $scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

        params.total(orderedData.length); // set total for recalc pagination
        $defer.resolve($scope.users);
    }
});

あなたのtrのフィルターのものを削除します

<input type="text" ng-model="filter.name"/>
<table ng-table="tableParams"  class="table">
    <tr ng-repeat="user in $data">
        <td data-title="'Name'" >
            {{user.name}}
        </td>
        <td data-title="'Age'">
            {{user.age}}
        </td>
    </tr>
</table>

この方法では、データ表示ではなく、データの再ロード時にデータがフィルタリングされます。$scope.filter は UI にバインドされ、ngTable によって $watched されます。

プランカーのデモ

于 2014-10-20T14:48:54.640 に答える
1

@Clemsの回答に従おうとしましたが、役に立ちませんでした。いくつかの調査を行って、ngTable Github リポジトリから解決策を見つけました。もっと簡単な解決策があります。

<input type="text" ng-model="tableParams.filter()['name']" />
<table ng-table="tableParams" show-filter="false" class="table">
    <tr ng-repeat="user in $data">
        <td data-title="'Name'" filter="{ 'name': 'text' }">
            {{user.name}}
        </td>
     </tr>
</table>

唯一の問題（私が今見つけようとしている）は、複数の列を単一の入力でフィルタリングする方法です。お役に立てれば

于 2017-10-02T16:12:49.457 に答える
-1

あなたはこれを行うことができます：

  1. 別のテキスト ボックスと別のテーブルを作成します。テキストボックスのng-model 属性は、データをフィルタリングする必要があるものである必要があります。したがって、このテキストボックスはページのどこにでも配置できます。

    <input type="text" ng-model="name" />

  2. を使用してテーブルをペイントし、テキスト ボックスに指定ng-repeatされた値でフィルターを指定しますng-model。

    <tr ng-repeat="item in items|filter:name">

サンプルは次のとおりです。

<table>
            <th>Item Name</th>
            <th>Item Price</th>
            <tr ng-repeat="item in items|filter:name">
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
            </tr>

</table>
<input type="text" ng-model="name" />
于 2014-08-22T06:57:05.893 に答える