ng-table選択ドロップダウンメニューを使用したフィルタ

結果をフィルタリングするための選択ドロップダウンメニューとともにNgテーブルを作成しようとしています。これは私が今までに得たものです。ng-table選択ドロップダウンメニューを使用したフィルタ

1）フィルターメニューの結果として作成されたページネーションを取り除くにはどうすればよいですか？私はページネーションが1つだけ必要です。私はCSS .ng-table-pager { display：none; }。ただし、両方のページネーションはなくなります。

2）デフォルトのフィルタメニューは空白で、すべてのデータが表示されます。これは素晴らしい。空のフィールドを「すべての」テキストフィールドに変更するにはどうすればよいですか？

3）すぐにフィルタリングする代わりに、フィルタ機能を呼び出す前に送信ボタンを追加できますか？最初

(function() { 
 
    "use strict"; 
 

 
    angular.module("uCloud", ["ngTable"]) 
 
     .controller("myController", myController); 
 

 
    myController.$inject = ["NgTableParams"]; 
 

 
    function myController(NgTableParams) { 
 

 
     this.nameFilter = [ 
 
      {id:"teste1", title:"-> teste1"}, 
 
      {id:"teste2", title:"-> teste 2"}, 
 
      {id:"teste3", title:"-> teste 3"}, 
 
      {id:"teste4", title:"-> teste 4"}, 
 
      {id:"teste5", title:"-> teste 5"}, 
 
     ]; 
 

 

 

 
     this.objectTest = [ 
 

 
      {name: "teste1", description: "testando1"}, 
 
      {name: "teste2", description: "testando2"}, 
 
      {name: "teste3", description: "testando3"}, 
 
      {name: "teste4", description: "testando4"} 
 
     ]; 
 

 
     this.tableParams = new NgTableParams({}, { 
 
      dataset: this.objectTest 
 
     }); 
 
    } 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html > 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>ng-table - Select Filter</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'> 
 
</head> 
 

 
<body> 
 
<div ng-app="uCloud" class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-3" ng-controller="myController as demo"> 
 
      <h3>ngTable</h3> 
 
      <table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped"> 
 
       <tr ng-repeat="row in $data"> 
 

 
        <td data-title="'Name'" 
 
         filter-data="demo.nameFilter">{{row.name}} 
 
        </td> 
 

 

 

 
        <td data-title="'Description'" 
 
         filter-data="demo.descriptionFilter">{{row.description}} 
 
        </td> 
 

 

 
       </tr> 
 
      </table> 
 

 
      <table ng-table="demo.tableParams" class=""> 
 

 
      <td data-title="'Name'" 
 
       filter="{name: 'select'}" 
 
       filter-data="demo.nameFilter">All{{row.name}} 
 
      </td>   </table> 
 

 

 

 

 
     </div> 
 
    </div> 
 
</div> 
 
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js'></script> 
 

 
<script src='https://unpkg.com/ng-table/bundles/ng-table.min.js'></script> 
 
<script src="index.js"></script> 
 

 
</body> 
 
</html>

出典

2017-05-13 Tosm

まず物事：警告、あなたは二度角度読み込んでいます。 Angularを指す<script>タグの1つを取り除く。

1）はどのように私は、フィルタメニューの結果として作成されたページネーションを取り除くのですか？私はページネーションが1つだけ必要です。

ng-tableが2つ作成されているため、2つのページネーションコントロールが表示されます。あなたはフィルタのテーブルを取り除き、通常のselect HTML要素を使用する必要があります。

<select ng-model="demo.tableParams.filter()['name']"> 
    <option value="">All</option> 
    <option value="teste1">->teste1</option> 
    <option value="teste2">->teste2</option> 
    <option value="teste3">->teste3</option> 
    <option value="teste4">->teste4</option> 
    <option value="teste5">->teste5</option> 
    </select>

2）デフォルトのフィルタメニューは、すべてのデータを示している空白になっています。これは素晴らしい。空のフィールドを「すべての」テキストフィールドに変更するにはどうすればよいですか？

上記のように、には、value=""を追加してください。これにより、データセット内のすべての項目が一致します。

3）すぐにフィルタリングする代わりに、フィルタ機能を呼び出す前に送信ボタンを追加できますか？

チェックアウトNgTable samples - change filter values programmatically。

作業デモhere。

angular.module("uCloud", ["ngTable"]) 
 
    .controller("myController", myController); 
 

 
myController.$inject = ["NgTableParams"]; 
 

 
function myController(NgTableParams) { 
 

 
    this.tableParams = new NgTableParams({}, { 
 
    dataset: [{ 
 
     name: "teste1", 
 
     description: "testando1" 
 
    }, { 
 
     name: "teste2", 
 
     description: "testando2" 
 
    }, { 
 
     name: "teste3", 
 
     description: "testando3" 
 
    }, { 
 
     name: "teste4", 
 
     description: "testando4" 
 
    }], 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src='https://unpkg.com/ng-table/bundles/ng-table.min.js'></script> 
 
<script src="index.js"></script> 
 
<!DOCTYPE html> 
 
<html > 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>ng-table - Select Filter</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'> 
 
</head> 
 

 
<body> 
 
<div ng-app="uCloud" class="container-fluid"> 
 
    <div class="row"> 
 
<div class="col-md-3" ng-controller="myController as demo"> 
 
    <h3>ngTable</h3> 
 
    <table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped"> 
 
    <tr ng-repeat="row in $data"> 
 
     <td data-title="'Name'" filter-data="demo.nameFilter">{{row.name}} 
 
     </td> 
 
     <td data-title="'Description'" filter-data="demo.descriptionFilter">{{row.description}} 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <select ng-model="demo.tableParams.filter()['name']"> 
 
    <option value="">All</option> 
 
    <option value="teste1">->teste1</option> 
 
    <option value="teste2">->teste2</option> 
 
    <option value="teste3">->teste3</option> 
 
    <option value="teste4">->teste4</option> 
 
    <option value="teste5">->teste5</option> 
 
    </select> 
 
</div> 
 
    </div> 
 
</div> 
 

 

 
</body> 
 
</html>

出典

2017-05-13 04:19:41

@Tosmは、私の答えの助けをしましたか？ –

はい、本当にありがとうございます！実際にはとても短くエレガントですが、私はそれに非常に多くの時間を費やしました。感謝します。もう一度 – Tosm

ng-table選択ドロップダウンメニューを使用したフィルタ

答えて

関連する問題