1つの列に対して複数のフィルタ値を持つng-repeatテーブル

Question

私はオブジェクトの配列から動的テーブルを生成し、angle-ui-bootstrapを使用して行をページ分割しました。私はまた、ユーザーの選択に基づいてテーブルに行フィルター機能を実装する必要があります。たとえば、チェックボックスから1つ以上の都市を選択し、一致する都市がある行のみを表示するか、ユーザーが特定の名前を選択するか、またはその両方の組み合わせを選択します。以下のサンプルデータです：

ctrl.data = [{ 
    id: 1, 
    name: 'Ram Kumar', 
    city: 'Delhi', 
    date: new Date("October 13, 2014 11:13:00") 
}, { 
    id: 2, 
    name: 'Raman Kumar', 
    city: 'Mumbai', 
    date: new Date("November 13, 2014 11:13:00") 
}, { 
    id: 3, 
    name: 'Raghav Kumar', 
    city: 'Chennai', 
    date: new Date("December 13, 2014 11:13:00") 
}]; 

私はまた、このようなプロパティ名などのデータのすべてのプロパティに関する情報が含まれていますメタデータを作成して、それが一意の値は、このプロパティは、すなわちチェックボックスを必要とするフィルタのようなものですまたはスライダ。以下はメタデータです：

ctrl.metadata = [{ 
    name: "ID", 
    values: [1, 2, 3], 
    type: "checkbox", 
    showFilter: false 
}, { 
    name: "Name", 
    type: "checkbox", 
    values: ["Ram Kumar", "Raman Kumar", "Raghav Kumar"], 
    showFilter: false 
}, { 
    name: "City", 
    type: "checkbox", 
    values: ["Delhi", "Mumbai", "Chennai"], 
    showFilter: true 
}, { 
    name: "Birth Date", 
    type: "date", 
    showFilter: false 
}, { 
    name: "Age", 
    type: "slider", 
    values: [18,26], 
    showFilter: false 
}]; 

私は現在、ID、名前、都市などの一部の属性に対して1値の静的フィルタクエリ変数を作成しています。データとメタデータとして、動的に生成されるかもしれません

<tr ng-repeat="row in data | filter: search | pages: currentPage : itemsPerPage"> 
    <td ng-repeat="item in row">{{ item }}</td> 
    </tr> 

をしかし、まず、私は、フィルタのクエリ変数（検索）をしたい：

<div ng-repeat="attr in metadata"> 
    <div ng-if="attr.name === 'ID'"> 
     Enter Filter: 
     <input type="textbox" ng-model="search.id" /> 
    </div> 

    <div ng-if="attr.name === 'City'"> 
     Enter Filter: 
     <input type="textbox" ng-model="search.city" /> 
    </div> 
<div> 

そして、私は、このようにテーブル行にこのフィルタを適用しています変化する。可能であれば、以下のようなものを入力してください。 searchQueryというメタデータオブジェクトプロパティに検索クエリを添付しました。第二に

<tr ng-repeat="row in data | filter: metadata[$index].searchQuery | pages: vm.currentPage : vm.itemsPerPage"> 
    <td ng-repeat="item in row">{{ item }}</td> 
    </tr> 

は、検索クエリが1つの文字列のみを取ることができますが、私は、フィルタを必要として複数の値、どのように基づくように：しかし、私はフィルタでそれを使用しようとしていますとき、私は結果を見ていません私はそれを達成することはできますか？私はカスタムフィルタについて研究しましたが、問題は、選択した値をどのように記録してからフィルタに送信するかです（たとえば、チェックボックスから選択したすべての都市を取得するなど）。いずれかの数のプロパティ、またはプロパティまたは値の名前が変更されたときに、ブレークしないように、すべての変数を動的またはメタデータの一部にする必要があります。都市は存在しないかもしれませんが、データが変更されたときの状態なので、何も静的にすることはできません。

実装の参考にしてください。 Here is a working plunker.

Answer 1

まず、あなたの<input>に変更する必要があります。

<input type="checkbox" ng-model="vm.selected[$index]" ng-true-value="'{{value}}'" ng-false-value="" /> {{value}} 

その後、あなたのng-repeatを：

<tr ng-repeat="row in vm.data | filter: vm.search | customFilter: vm.selected | pages: vm.currentPage : vm.itemsPerPage"> 

そして最後に、あなたはこのように、あなたが望むものを達成するためにcustom filterを実装できます。

.filter('customFilter', function() { 
    return function(items, search) { 
    if (!search || (Object.keys(JSON.parse(JSON.stringify(search))).length === 0 && search.constructor === Object)) { 
     return items; 
    } 
    var selected = Object.keys(search).map(function(key) { 
     return search[key] 
    }); 
    items = items.filter(function(value) { 
     return selected.indexOf(value.city) != -1; 
    }); 
    return items; 
    } 
}); 

完了を確認code

私はそれが役に立ちそうです。

ヒント：コンソールで見ることができるように私は、あなたがあなたの本当のプロジェクトでui-bootstrapのこれらのものを使用している場合は知らないが、彼らは廃止予定している：

PaginationControllerが廃止されます。代わりにUibPaginationController を使用してください。改ページは廃止されました。代わりにuib-paginationを使用してください。