angularjs ngTable -Custom filter template-calendar

jsp页面：

<script type="text/ng-template" id="path/to/your/filters/top-Date-One.html">    <input type="text"  ng-click="popup1.opened=!popup1.opened"   uib-datepicker-popup="{{formats[2]}}"  ng-model="vm.dateInfoOne" is-open="popup1.opened" datepicker-options="dateOptions"  ng-required="true" close-text="Close" alt-input-formats="altInputFormats" readonly class="form-control width-inherit" style="background-color: #fff"/></script>

<table  ng-table="vm.tableParamsCompletedOrder" class="table table-condensed table-bordered table-striped">    <tr ng-repeat="order in $data">        <td title="‘Date‘" filter="{orderDate: ‘path/to/your/filters/top-Date-One.html‘}" sortable="‘orderDate‘">{{order.orderDate | date:‘dd-MM-yyyy‘}}</td>        <td title="‘User Email‘" filter="{userEmail: ‘text‘}" sortable="‘userEmail‘">{{order.userEmail}}</td>        <td title="‘First Name‘" filter="{firstName: ‘text‘}" sortable="‘firstName‘">{{order.firstName}}</td>        <td title="‘Last Name‘" filter="{lastName: ‘text‘}" sortable="‘lastName‘">{{order.lastName}}</td>        <td title="‘Company‘" filter="{companyName: ‘text‘}" sortable="‘companyName‘">{{order.companyName}}</td>        <td title="‘Order Number‘"  filter="{orderCode: ‘text‘ }"  sortable="‘orderCode‘"><a href="#" data-ng-click="fn.openOrderInfo(order);">{{order.orderCode}}</a></td>        <td title="‘Datasource‘" filter="{datasource: ‘text‘}" sortable="‘datasource‘">{{order.datasource}}</td>        <td title="‘Quantity‘" filter="{quantity : ‘text‘}" sortable="‘quantity‘">{{order.quantity}}</td>    </tr></table>

其中

input是bootstrap中对应的日历控件

id="path/to/your/filters/top-Date-One.html"  对应  filter="{orderDate: ‘path/to/your/filters/top-Date-One.html‘}"

js:

angular.module("ni.controllers.user.reports", ["ngTable", "ngTableDemos", "angularMask"]);angular.module("ni.controllers.user.reports").config(setConfigPhaseSettings);setConfigPhaseSettings.$inject = ["ngTableFilterConfigProvider"];function setConfigPhaseSettings(ngTableFilterConfigProvider) {    var filterAliasUrls = {        // note: ngTable also registers a ‘number‘ filter        // we‘re overriding this alias to point to our custom template    };    ngTableFilterConfigProvider.setConfig({        aliasUrls: filterAliasUrls    });

    // optionally set a default url to resolve alias names that have not been explicitly registered    // if you don‘t set one, then ‘ng-table/filters/‘ will be used by default    ngTableFilterConfigProvider.setConfig({        defaultBaseUrl: "ng-table/filters/"    });}

angularjs controller 中

//日历控件

$scope.popup1 = {    opened: false};$scope.dateOptions = {    formatYear: ‘yy‘,    startingDay: 1};$scope.formats = [‘dd-MMMM-yyyy‘, ‘yyyy/MM/dd‘, ‘dd-MM-yyyy‘, ‘shortDate‘];$scope.altInputFormats = [‘M!/d!/yyyy‘];

//ordersList post得到的结果集合

vm.tableParamsCompletedOrder = new NgTableParams({count: 15 }, {counts:[], dataset: ordersList });

//对于日历使用监听

$scope.$watch(‘vm.dateInfoOne‘,function(n,o){    if(n!=o && n != undefined && vm.status=="2,3,4"){        var temp;        temp= _.filter(vm.tempCompletedOrder,function(item){            return $filter(‘date‘)(n, ‘yyyy-MM-dd‘)==$filter(‘date‘)(item.orderDate, ‘yyyy-MM-dd‘);        });        vm.tableParamsCompletedOrder = new NgTableParams({count: 15, filter: vm.tableParamsCompletedOrder.filter()}, {counts:[], dataset: temp });    }else {        if (vm.tableParamsCompletedOrder != undefined) {            vm.tableParamsCompletedOrder = new NgTableParams({count: 15, filter: vm.tableParamsCompletedOrder.filter()}, {counts: [], dataset: vm.tempCompletedOrder});        }    }})

其中

vm.tableParamsCompletedOrder.filter()是向vm.tableParamsCompletedOrder中增加之前的过滤条件

$filter(‘date‘)(item.orderDate, ‘yyyy-MM-dd‘)将日期格式化，item.orderDate是字符戳的形式

具体参考http://ng-table.com/#/filtering/demo-custom-template