如何应用angularjs-dropdown-multiselect来过滤angularjs中的表数据

时间:2016-06-09 12:43:09

标签: angularjs angularjs-filter

我使用angularjs-dropdown-multiselect来过滤来自表格的所选数据。但它不起作用。 HTML:

<body ng-controller="MainCtrl">
    <div class="form-group">
        <div class="col-md-2 col-sm-2 col-xs-12 margin-left">
            <label class="control-label">Year</label>
            <div ng-dropdown-multiselect="" options="yearOption" selected-model="yearSelected"></div>
        </div>
        <div class="col-md-2 col-sm-2 col-xs-12 margin-left">
            <label class="control-label">Month</label>
            <div ng-dropdown-multiselect="" options="example1data" selected-model="example1model"></div>
        </div>
    </div>
    <br> <br>
    <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><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>{{ 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>
</body>

这是plunker code

要求:

当我选择多个下拉元素然后同时过滤数据时。

0 个答案:

没有答案