如何为ngTable的select filter设置一个预选择选项



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

$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>

为你的ngTableParams添加filter属性

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

相关内容

最新更新