javascript - List JS を使用した Angular JS でのフィルタリングと並べ替え

Question

以下の構造のオブジェクトの配列があります。ここで、CustList は Customer レコードの配列です。フィルター ドロップダウンを設定するために、さらに 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 を使用している 2 つの理由: (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 ページネーション/検索を思いつきました。これは IMHO のコーディングが非常に面倒です。何かご意見は？