如何在单个手表变量中组合多个过滤值
How to combine multiple filter value in single watch variable?
我尝试使用角表概念做多个过滤器更新分页。但最终会为每个过滤器值创建多个手表函数。我知道这是错误的做法。我需要帮助来解决这个问题。
在html中，我有三个输入值来做过滤。一个是按日期，标题和any(search.$)。
**Html code** :
<div ng-controller="ShowAnnouncementListing">
<form role="form">
<div class="form-group">
<div class="col-xs-3">
<label for="ex1">Title</label>
<input class="form-control" ng-model="search.title" id="ex1" type="text">
</div>
<div class="col-xs-3">
<label for="ex2">Published Date</label>
<input class="form-control" ng-model="search.date" uib-datepicker-popup="{{format}}" ng-model="date" id="ex2" type="text">
</div>
<div class="col-xs-3">
<label for="ex3">Keywords</label>
<input class="form-control" ng-model="search.$" id="ex3" type="text">
</div>
</div>
</form>
<table class="table announcementList-table">
<thead>
<tr class="announcement-header">
<th style="width: 76px;"> Type </th>
<th> Published Date </th>
<th> Announcements </th>
</tr>
</thead>
<tbody>
<tr class="announcementList-National-section" ng-repeat="announcement in filtered = announcementListData | filter:search.date | filter:search.$ | filter:search.title | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td class="announcementList-table-National-segment">
<span class="National-label">{{announcement.type}}
</span>
<span class="announcementList-National-segment-triangle"></span>
</td>
<td class="announcementList-published-date-TD">
<span class="national-date-segment">
<span class="national-day-label"> {{announcement.date}} </span>
<p> {{announcement.month}}</p>
</span>
</td>
<td class="announcementList-announcement-title-TD">
<span class="national-segment-content"> <span class="national-segment-text"> {{announcement.title}} </span>{{announcement.desc}}</span>
</td>
</tr>
<tbody>
</table>
<pagination page="currentPage" max-size="noOfPages" total-items="totalItems" items-per-page="entryLimit"></pagination>
</div>
**JS code** :
var announcementJsonData = [
{
"title":"Annoncement1",
"desc":"Lorem ipsum dolor sit, consectetur adipiscing elit. Aliquam adipiscing massa lacus.",
"date":"05",
"month":"July",
"type":"National",
"img":"image.jpg"
},
{
"title":"Annoncement2",
"desc":"Lorem ipsum dolor sit, consectetur adipiscing elit. Aliquam adipiscing massa lacus.",
"date":"15",
"month":"August",
"type":"Regionl",
"img":"image.jpg"
},
{
"title":"Annoncement3",
"desc":"Lorem ipsum dolor sit, consectetur adipiscing elit. Aliquam adipiscing massa lacus.",
"date":"28",
"month":"June",
"type":"Regionl",
"img":"image.jpg"
},
{
"title":"Annoncement4",
"desc":"Lorem ipsum dolor sit, consectetur adipiscing elit. Aliquam adipiscing massa lacus.",
"date":"21",
"month":"July",
"type":"National",
"img":"image.jpg"
},
{
"title":"Annoncement5",
"desc":"Lorem ipsum dolor sit, consectetur adipiscing elit. Aliquam adipiscing massa lacus.",
"date":"10",
"month":"July",
"type":"National",
"img":"image.jpg"
},
{
"title":"Annoncement6",
"desc":"Lorem ipsum dolor sit, consectetur adipiscing elit. Aliquam adipiscing massa lacus.",
"date":"14",
"month":"July",
"type":"National",
"img":"image.jpg"
},
{
"title":"Annoncement7",
"desc":"Lorem ipsum dolor sit, consectetur adipiscing elit. Aliquam adipiscing massa lacus.",
"date":"07",
"month":"July",
"type":"National",
"img":"image.jpg"
},
{
"title":"Annoncement8",
"desc":"Aorem ipsum dolor sit, consectetur adipiscing elit. Aliquam adipiscing massa lacus.",
"date":"23",
"month":"July",
"type":"National",
"img":"image.jpg"
},
{
"title":"Annoncement9",
"desc":"Lorem ipsum dolor sit, consectetur adipiscing elit. Aliquam adipiscing massa lacus.",
"date":"17",
"month":"July",
"type":"National",
"img":"image.jpg"
},
{
"title":"Annoncement10",
"desc":"Lorem ipsum dolor sit, consectetur adipiscing elit. Aliquam adipiscing massa lacus.",
"date":"16",
"month":"August",
"type":"National",
"img":"image.jpg"
},
{
"title":"Annoncement11",
"desc":"Lorem ipsum dolor sit, consectetur adipiscing elit. Aliquam adipiscing massa lacus.",
"date":"05",
"month":"September",
"type":"National",
"img":"image.jpg"
}
];
var sampleApp = angular.module('sampleApp', ['ngRoute','ui.bootstrap']);
sampleApp.filter('startFrom', function () {
return function (input, start) {
if (input) {
start = +start;
return input.slice(start);
}
return [];
};
});
sampleApp.controller('ShowAnnouncementListing',['$scope','filterFilter',function($scope , filterFilter) {
$scope.message = "This is Announcement Listing page";
$scope.announcementListData = announcementJsonData;
/* $scope.announcementListData = announcementJsonData;
$scope.totalItems = $scope.announcementListData.length;
$scope.viewby = 5;
$scope.currentPage = 1;
$scope.itemsPerPage = $scope.viewby ;
$scope.maxSize = 5; //Number of pager buttons to show */
/* $scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
}; */
/* $scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
}; */
/* $scope.setItemsPerPage = function(num) {
$scope.itemsPerPage = num;
$scope.currentPage = 1; //reset to first paghe
} */
// create empty search model (object) to trigger $watch on update
$scope.search = {};
$scope.resetFilters = function () {
// needs to be a function or it won't trigger a $watch
$scope.search = {};
};
// pagination controls
$scope.currentPage = 1;
$scope.totalItems = $scope.announcementListData.length;
$scope.entryLimit = 5; // items per page
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
// $watch search to update pagination
$scope.$watch('search.date', function (newVal, oldVal) {
$scope.filtered = filterFilter($scope.announcementListData, newVal);
$scope.totalItems = $scope.filtered.length;
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
$scope.currentPage = 1;
}, true);
$scope.$watch('search.$', function (newVal, oldVal) {
$scope.filtered = filterFilter($scope.announcementListData, newVal);
$scope.totalItems = $scope.filtered.length;
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
$scope.currentPage = 1;
}, true);
$scope.$watch('search.title', function (newVal, oldVal) {
$scope.filtered = filterFilter($scope.announcementListData, newVal);
$scope.totalItems = $scope.filtered.length;
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
$scope.currentPage = 1;
}, true);
}]);
您可以将函数从$watch声明中取出，然后引用它。
$scope.$watch('search.date', updateSearch, true);
$scope.$watch('search.$', updateSearch, true);
$scope.$watch('search.title', updateSearch, true);
function updateSearch(newVal) {
$scope.filtered = filterFilter($scope.announcementListData, newVal);
$scope.totalItems = $scope.filtered.length;
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
$scope.currentPage = 1;
}
或者，如果你只想要一个单独的watch声明，你可以这样做:
$scope.$watch(function(){
return {date: $scope.search.date, $: $scope.search.$, title: $scope.search.title}
}, function(searchParams){
// searchParams will now only get run when the object created above changes,
// so if any of the fields change, it should pass the updated object in to this function
$scope.filtered = filterFilter($scope.announcementListData, searchParams);
$scope.totalItems = $scope.filtered.length;
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
$scope.currentPage = 1;
}, true);
相关文章：
- 有可能过滤来自嵌入式YouTube的声音吗
- 根据id将json数组组合为一个json数组
- 接受不在列表中的值-引导组合框
- 为什么我的d3.jsselectAll+过滤器没有过滤
- 从客户端获取修改后的对象，并将其与服务器上的原始对象组合
- 组合两个javascript函数
- Telerik rad组合框多列数据绑定
- 两个分区的可过滤投资组合
- extjs基于另一个组合框值过滤组合框
- ExtJS组合框和过滤存储
- RegExp / Jquery / Isotope 按关键字搜索和过滤:不使用某些关键字组合，为什么
- 如何使用ag-grid内置列过滤过滤组合值
- ExtJs组合过滤不能正常工作
- 剑道组合框在过滤时丢失html字段
- Ext JS:过滤组合框的正确技术
- 过滤组合框不适用于常见的商店组合
- 如何过滤除组合框中选定值以外的网格数据
- jQuery(同位素)-组合过滤和排序
- 如何在单个手表变量中组合多个过滤值
- 尝试过滤和组合JSON项
