1

我有一个以下结构的对象数组，其中 CustList 是一个客户记录数组。我创建了另外 4 个变量来填充过滤器下拉列表。

//<app.js code>
$scope.CustList = [];
$scope.Customer = {
       "DataCenter":"", 
       "Geo":"",    
       "CustomerName":"",   
       "ESX":"",    
       "TenantKey":"",  
       "Env":"",    
       "Version":""
}
$scope.SaESX = _.uniq(response.data,'ESX').map(a => a.ESX);
$scope.SaEnv = _.uniq(response.data,'Env').map(a => a.Env);
$scope.SaGeo = _.uniq(response.data,'Geo').map(a => a.Geo);
$scope.SaDC = _.uniq(response.data,'DataCenter').map(a => a.DataCenter);
$scope.SaVersion = _.uniq(response.data,'Version').map(a => a.Version);

我的 HTML 代码如下所示。

<div id='custByType' class='cardBody' scroll="auto">
    <b>Filters</b>
    <div class='filterBar'>
        <B>Geo:</B>
        <select class='selList' ng-model="Customer.Geo" ng-change='updateList()'>
            <option value="? string:?" selected></option>
            <option ng-repeat="geo in SaGeo" value="{{geo}}">{{geo}}</option>
        </select>
        &nbsp;&nbsp;
        <b>ESX:</b>
        <select class='selList' ng-model="Customer.ESX">
                <option value="? string:?" selected></option>
                <option ng-repeat="ESX in SaESX" value="{{ESX}}">{{ESX}}</option>
        </select>
        &nbsp;&nbsp;
        <b>DataCenter:</b>
        <select class='selList' ng-model="Customer.DataCenter">
                <option value="? string:?" selected></option>
                <option ng-repeat="dc in SaDC" value="{{dc}}">{{dc}}</option>
        </select>
        &nbsp;&nbsp;
        <B>Version:</B>
        <select class='selList' ng-model="Customer.Version">
                <option value="? string:?" selected></option>
                <option ng-repeat="v in SaVersion" value="{{v}}">{{v}}</option>
        </select>
        <button class='btn btn-small btn-primary' ng-click='resetFilter()'>Reset</button>
    </div>
        <div class='searchBar'>
            <span class='alignleft'>
                <button class='btn btn-small btn-primary' onClick='ShowAdd()'>Add All</button>
                <button class='btn btn-small btn-primary'>Add Selected</button>
            </span>
            <span class='alignright'>
                <input class='ALLsearch inpField' style='width:100px;' id='searchSaaS' placeholder="Search"/>
                <button class='btn btn-small btn-primary' onClick='setPagination(custTypeList,10)'>10</button>
                <button class='btn btn-small btn-primary' onClick='setPagination(custTypeList,20)'>20</button>
                <button class='btn btn-small btn-primary' onClick='setPagination(custTypeList,50)'>50</button>
                <button class='btn btn-small btn-primary' onClick='setPagination(custTypeList,99999)'>All</button>
            </span>
        </div>
        <table class="newListTable">
        <thead><tr>
            <th></th>
            <th>Tenant Key</th>
            <th>Name</th>
            <th>Geo</th>
            <th>DC</th>
            <th>Env</th>
            <th>Version</th>
            <th></th>
        </tr></thead>
        <tbody class="list" >
            <TR  ng-repeat="cust in CustList | filter:Customer | unique: 'TenantKey'"> <!--  -->
                <td><input type='checkbox'></td>
                <td class="tenantkey" ng-bind='cust.TenantKey'></TD>
                <td class="account" ng-bind='cust.CustomerName'></TD>
                <TD class="geo" ng-bind='cust.Geo'></TD>
                <TD class="env" ng-bind='cust.Env'></TD><td></td>
                <TD class="version" ng-bind='cust.Version'></TD><td></td>
            </TR>
        </tbody>
    </table>
    <ul class='pagination'></ul>
</div>

我得到了一个漂亮的输出，使用下拉列表中的值很好地过滤了表数据。 没有 List.js 的屏幕 现在，如果我将 List.js 添加到其中，那就是问题开始的时候。我使用 List.js 的两个原因：（1）让我轻松进行分页。(2) 让我在列表中轻松搜索！

var optionsSAAS = {
    valueNames:['tenantKey','account','geo','env','version'], 
    searchClass:'ALLsearch', 
    page: 10, 
    pagination:true
};
var custTypeList;

function loadList()
{
    custTypeList = new List('custByType', optionsSAAS);
    custTypeList.show(1,5);
}

无过滤器

问题：当我使用下拉列表进行过滤时，列表被过滤但未呈现。在下面的屏幕中，我使用具有 3 条记录的版本进行过滤 过滤后

如您所见，记录未呈现，分页也已关闭。我猜我在这里遗漏了一些东西，不确定是什么。如果我单击第 1 页或任何内容，它会重置整个过滤并显示所有记录！

我曾尝试使用 Angular Filtering 搜索 List.js，但想出了自定义 Angular 分页/搜索，恕我直言，这很麻烦。有什么想法吗？

4

0 回答 0