Фильтрация двух баз данных одновременно с помощью angular-data-grid - PullRequest
Новая
       10

Фильтрация двух баз данных одновременно с помощью angular-data-grid

0 голосов
/ 04 мая 2018

У меня есть две базы данных, которые я заполняю двумя разными массивами 

$scope.UI = {};
$scope.gridActions = {};
$scope.storeNameArray = [];
$scope.selectedStore = {};
$scope.monthArray = [];
$scope.dayArray = [];

$scope.monthGridOptions = {
    data: $scope.monthArray,
    urlSync: true,
    enableSorting: true,
    sort: {
        predicate: 'month',
        direction: 'asc'
    }
};
$scope.dayGridOptions = {
    data: $scope.dayArray,
    urlSync: true,
    enableSorting: true,
    sort: {
        predicate: 'day',
        direction: 'asc'
    }
};

Это объект, который находится внутри массивов. Разница между двумя таблицами заключается в ключе месяца или дня. 

{
      month/day: "someKey",
      deposit: 0,
      withdraw: 0,
      store: "store name"
}

Теперь я пытаюсь применить фильтр, который будет фильтровать обе базы данных по имени магазина.

Вот мой HTML 

<div grid-data id='month' grid-options="monthGridOptions" grid-actions="gridActions" class="portlet light bordered">
    <div class="portlet-title">
        <div class="caption font-dark">
            <i class="icon-wallet"></i>
            <span class="caption-subject font-blue bold uppercase"> Last 12 Month</span>
        </div>
        <div class="actions">
            <md-select filter-by="store"
                       ng-model="selectedStore"
                       ng-change="gridActions.filter()"
                       filter-type="text">
                <md-option ng-repeat="storeName in storeNameArray" ng-value="storeName">{{ storeName }}</md-option>
            </md-select>
        </div>
    </div>
    <div class="portlet-body">

        <div class="table-responsive">
            <table class="table">
                <thead>
                <tr>
                    <th> Month</th>
                    <th> Store</th>
                    <th> Deposit</th>
                    <th> Withdraw</th>
                </tr>
                </thead>
                <tbody>
                <tr grid-item>
                    <td ng-bind="item.month"></td>
                    <td ng-bind="item.store"></td>
                    <td ng-bind="item.deposit"></td>
                    <td ng-bind="item.withdraw"></td>
                </tr>
                </tbody>
            </table>
        </div>



    </div>


</div>

<div grid-data id='day' grid-options="dayGridOptions" grid-actions="gridActions"class="portlet light bordered">
    <div class="portlet-title">
        <div class="caption font-dark">
            <i class="icon-wallet"></i>
            <span class="caption-subject font-blue bold uppercase"> Last 12 Month</span>
        </div>
        <div class="actions">
            <!--<div class="btn-group btn-group-devided" data-toggle="buttons">
                <label class="btn btn-transparent dark btn-outline btn-circle btn-sm active">
                    <input type="radio" name="options" class="toggle" id="option1">Actions</label>
                <label class="btn btn-transparent dark btn-outline btn-circle btn-sm">
                    <input type="radio" name="options" class="toggle" id="option2">Settings</label>
            </div>-->
        </div>
    </div>
    <div class="portlet-body">

        <div class="table-responsive">
            <table class="table">
                <thead>
                <tr>
                    <th> Day</th>
                    <th> Store</th>
                    <th> Deposit</th>
                    <th> Withdraw</th>
                </tr>
                </thead>
                <tbody>
                <tr grid-item>

                    <td ng-bind="item.day"></td>
                    <td ng-bind="item.store"></td>
                    <td ng-bind="item.deposit"></td>
                    <td ng-bind="item.withdraw"></td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>

</div>

$scope.storeNameArray содержит все возможные имена магазинов, которые используются внутри data-item.store объекта.

Теперь в таблице показано одно отфильтрованное хранилище, которое было автоматически выбрано при запуске. И когда я выбираю другой магазин из dropDown, ничего не меняется.

Если я закомментирую код фильтра, все магазины будут корректно отображаться в таблицах.

Я хотел бы, чтобы фильтр работал и мог выбирать, какой из них выбран первым.

Это библиотека, которую я использую для таблицы данных. https://github.com/angular-data-grid/angular-data-grid.github.io

...