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

轉載于:https://www.cnblogs.com/qyhol/p/5359935.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的angularjs ngTable -Custom filter template-calendar的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。