使用angular-data-grid

Question

我有两个数据库，我用两个不同的数组填充

$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中选择另一个商店时，没有任何变化。

如果我注释掉过滤器代码，则所有商店都会正确显示表格。

我想要做的是让过滤器正常工作，并且能够选择哪一个是第一个选择过滤器。

这是我用于数据表的lib。 https://github.com/angular-data-grid/angular-data-grid.github.io