Want to filter rows with multi select drop down in table
In Table, I want to filter rows with multi select drop down.
here is plunker.
Example:
When I select 2 country and 2 month in drop down then data so accordingly in table.
HTML:
<div id="datatable-buttons_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<!--page size-->
<div class="table-search-bar">
<div class="dt-buttons btn-group">
PageSize:
<select ng-model="entryLimit" class="form-control">
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
<!--filter-->
<div id="datatable-buttons_filter" class="dataTables_filter"><label>Filtered:<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control input-sm" aria-controls="datatable-buttons" /></label></div>
</div>
<div ng-show="filteredItems > 0">
<table id="datatable-buttons" class="table table-striped table-bordered">
<thead>
<th> <input type="checkbox" ng-model="selectRowId" ng-click="selectedAll()"></th>
<th>id</th>
<th><a ng-click="sort_by('year');">Year </a></th>
<th><a ng-click="sort_by('month');">Month </a></th>
<th><a ng-click="sort_by('country');">Country </a></th>
<th><a ng-click="sort_by('mobile_operator');">Mobile Operator </a></th>
<th><a ng-click="sort_by('service');">Service </a></th>
<th>Action</th>
</thead>
<tbody ng-init="get_product()">
<tr ng-repeat="product in filtered = (pagedItems| filter:search | orderBy : predicate :reverse) | limitTo:entryLimit ">
<td>
<input type="checkbox" ng-model="selctedIds[product.id]" ng-checked="product.deleted">
</td>
<td>{{ product.id}} </td>
<td>{{ product.year}} </td>
<td>{{ product.month}}</td>
<td>{{ product.country}}</td>
<td>{{ product.mobile_operator}}</td>
<td>{{ product.service}}</td>
<td><a href="" ng-click="prod_update(product.id)">Update</a></td>
</tr>
</tbody>
</table>
<!--total result out of-->
<div class="dataTables_info" id="datatable-buttons_info" >Page {{currentPage + 1}} of {{numberOfPages}} <!--Showing {{ filtered.length}} of {{ totalItems}} entries--></div>
<!--pagination-->
<div ng-show="filteredItems > 0">
<button class="btn" ng-disabled="currentPage <= 0" ng-click="currentPage = currentPage - 1"><<</button>
<!-- <button class="btn" ng-disabled="currentPage == 0" ng-click="currentPage = 0">1</button>
<button class="btn" ng-disabled="currentPage == 1" ng-click="currentPage = 1">2</button>....
<button class="btn" ng-disabled="currentPage == numberOfPages - 1" ng-click="currentPage = numberOfPages - 1">{{numberOfPages - 1}}</button>
<button class="btn" ng-disabled="currentPage == numberOfPages" ng-click="currentPage = numberOfPages">{{numberOfPages}}</button>-->
<button class="btn" ng-disabled="currentPage >= numberOfPages" ng-click="currentPage = currentPage + 1">>></button>
</div>
</div>
<div ng-show="filteredItems == 0">
<div class="col-md-12">
<h4 class="center-margin">No Role found</h4>
</div>
</div>
</div>
I appreciate every response. Thanks Ahead.
Answer
New Plunker with your requested implementation
Relevant Code changes is as follows. Controller:
$scope.monthList = [1,2,3,4,5,6,7,8,9,10];
$scope.countryList = ["Chad", "India", "China", "UK"];
$scope.selectedMonths = $scope.monthList;// To show all results initialy, all the options in the countries list will be selected
$scope.selectedCountries = $scope.countryList;// To show all results initialy, all the options in the months list will be selectedCustom filter used:'inArray'
.filter('inArray', function($filter){
return function(list, arrayFilter, element){
if(arrayFilter){
return $filter("filter")(list, function(listItem){
return arrayFilter.indexOf(listItem[element]) != -1;
});
}
};
});Multi Select dropdown for countries:
<select size="4" multiple ng-multiple="true" ng-model="selectedCountries" ng-options="country for country in countryList"></select><select size="10" multiple ng-multiple="true" ng-model="selectedMonths" ng-options="month for month in monthList"></select>All the code are self explanatory.