想要在表中使用多选下拉列表过滤行

Question

在表中，我想使用多选下拉列表过滤行。

这是plunker。

例子：

当我在下拉列表中选择 2 个国家和 2 个月时，相应地在表中选择数据。

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&nbsp;&nbsp;</a></th>
                                    <th><a ng-click="sort_by('month');">Month&nbsp;</a></th>
                                    <th><a ng-click="sort_by('country');">Country&nbsp;</a></th>
                                    <th><a ng-click="sort_by('mobile_operator');">Mobile Operator&nbsp;</a></th>
                                    <th><a ng-click="sort_by('service');">Service&nbsp;</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}}&nbsp;</td>
                                            <td>{{ product.year}}&nbsp;</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>

我感谢每一个回应。谢谢前面。

Answer 1

具有您要求的实施的新 Plunker

相关代码变更如下。 控制器：

$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 selected

使用的自定义过滤器：'inArray'

.filter('inArray', function($filter){
    return function(list, arrayFilter, element){
        if(arrayFilter){
            return $filter("filter")(list, function(listItem){
                return arrayFilter.indexOf(listItem[element]) != -1;
            });
        }
    };
});

国家/地区的多选下拉菜单：

<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>

所有的代码都是不言自明的。