【问题标题】:How to set a pre-selected option for ngTable select filter?如何为 ngTable 选择过滤器设置预选选项?
【发布时间】:2015-09-09 10:31:06
【问题描述】:

如何为 ngTable 选择过滤器设置预选选项?我的代码如下,它类似于官方 ngTable 页面中的example。现在选择的值是一个空选项,我希望默认情况下预先选择第一个带有值的选项(显示表中所有数据的选项):

$scope.customersTable = new ngTableParams({
    page: 1,            // show first page
    count: 10,
    sorting: {
        importDate: 'desc'
    }
}, {
    total: $scope.customers.length, // length of data
    getData: function ($defer, params) {
        var orderedData = params.sorting() ?
            $filter('orderBy')($scope.customers, params.orderBy()) :
            $scope.customers;
        orderedData = params.filter ?
            $filter('filter')(orderedData, params.filter()) :
            orderedData;
        $scope.custs = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
        params.total(orderedData.length);
        $defer.resolve($scope.custs);
    }
});

var inArray = Array.prototype.indexOf ?
    function (val, arr) {
        return arr.indexOf(val)
    } :
    function (val, arr) {
        var i = arr.length;
        while (i--) {
        if (arr[i] === val) return i;
    }
    return -1
};

$scope.importDates = function () {
    var def = $q.defer(),
        arr = [],
        importDates = [];
    $scope.$watch('customers', function () {
        angular.forEach($scope.customers, function (item) {
            if (inArray(item.importDate, arr) === -1) {
                arr.push(item.importDate);
                importDates.push({
                    'id': item.importDate,
                    'title': item.importDate
                });
            }
        });
    });
    def2.resolve(importDates);
    return def2;
};

还有 HTML:

<table ng-table="customersTable" show-filter="true" class="table table-hover">
    <tbody>
        <tr data-ng-repeat="customer in $data">
            <td data-title="'First Name'" sortable="'firstName'">
                {{customer.firstName}}
            </td>
            <td data-title="'Import Date'" sortable="'importDate'" filter="{ 'importDate': 'select' }" filter-data="importDates()">
                {{customer.importDate | date}}
            </td>
        </tr>
    </tbody>
</table>

【问题讨论】:

    标签: angularjs angularjs-filter ngtable


    【解决方案1】:

    将过滤器属性添加到您的 ngTableParams

    $scope.customersTable = new ngTableParams({
         page: 1,            // show first page
         count: 10,
         sorting: {
             importDate: 'desc'
         },
         filter:{importDate:'yourDefaultValue'}, 
    .....})
    

    【讨论】:

    • @NadavSlnai 但我不希望选择特定日期。我希望显示所有行,即选择筛选器的第一个选项。
    • 通过将“全部”值设置为 null 并将初始过滤器设置为该键的 null 对我有用。 html 看起来像这样:
    • @NadavSlnai 你能告诉我你的caaMainCtrl.tableCols.platform.filterData 长什么样吗?
    猜你喜欢
    • 2015-10-01
    • 1970-01-01
    • 2016-10-31
    • 2020-07-21
    • 2011-10-27
    • 1970-01-01
    • 1970-01-01
    • 2015-06-24
    • 2016-11-06
    相关资源
    最近更新 更多