I have three dropdown boxes. I need to filter the data and need to be displayed in the table based on my checkbox selection(either with single checkbox or two checkboxes or three checkboxes).
I have done the following, but if we observe it clearly, I am not able to filter the data properly using AngularJS.
Like:
a. It should work for individual checkbox selection: means if I select any single checkbox either from Name or Description or Field4, then respective matched filtered data should be displayed in the table, otherwise it shouldn't be displayed any data(i.e if it doesn't match our checkbox selection means it won't display any data)
b. It should work for multiple(two) checkbox selection: means if I select any multiple checkboxes like either one from Name and one from Description or one from Description and one from Field4 or one from Field4 and one from Name, then respective matched filtered data should be displayed in the table, otherwise it shouldn't be displayed any data(i.e if it doesn't match our checkbox selection means it won't display any data)
c. It should work for multiple(three) checkbox selection: means if I select the three checkboxes like one from Name and one from Description and one from Field4, then respective matched filtered data should be displayed in the table, otherwise it shouldn't be displayed any data(i.e if it doesn't match our checkbox selection means it won't display any data)
I have done the following:
html:
<script src="http://ift.tt/2fymbNP"></script>
<div ng-controller="TestCtrl">
<table id="items" class="table table-striped table-condensed table-hover" border="1">
<thead>
<tr>
<th class="id" custom-sort order="'id'" sort="sort">Id </th>
<th class="name" custom-sort order="'name'" sort="sort">Name </th>
<th class="description" custom-sort order="'description'" sort="sort">Description </th>
<th class="field4" custom-sort order="'field4'" sort="sort">Field 4 </th>
<th class="field5" custom-sort order="'field5'" sort="sort">Field 5 </th>
</tr>
</thead>
<tfoot>
<td colspan="6">
<div class="pagination pull-right">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) "
ng-class="{active: n == currentPage}"
ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: (currentPage) == pagedItems.length - 1}">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
<tbody>
<tr ng-repeat="item in pagedItems[currentPage] | orderBy:sort.sortingOrder:sort.reverse | filter:filterItems">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h4>Filters</h4>
<div>
<div class="dropdown">
<a href="#" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Select Name<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><input type="checkbox" data-ng-model='pagedItems.name' data-ng-true-value="'name 1'" data-ng-false-value='false' /> name1</li>
<li><input type="checkbox" data-ng-model='pagedItems.name' data-ng-true-value="'name 2'" data-ng-false-value='false' /> name2</li>
<li><input type="checkbox" data-ng-model='pagedItems.name' data-ng-true-value="'name 3'" data-ng-false-value='false' /> name3</li>
</ul>
</div><br><br>
<div class="dropdown">
<a href="#" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Select Description <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><input type="checkbox" data-ng-model='pagedItems.description' data-ng-true-value="'description 1'" data-ng-false-value='false' /> description 1</li>
<li><input type="checkbox" data-ng-model='pagedItems.description' data-ng-true-value="'description 2'" data-ng-false-value='false' /> description 2</li>
</ul>
</div>
<br><br>
<div class="dropdown">
<a href="#" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Select Field4 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><input type="checkbox" data-ng-model='pagedItems.field4' data-ng-true-value="'field4 1'" data-ng-false-value='false' /> field4 1</li>
<li><input type="checkbox" data-ng-model='pagedItems.field4' data-ng-true-value="'field4 2'" data-ng-false-value='false' /> field4 2</li>
<li><input type="checkbox" data-ng-model='pagedItems.field4' data-ng-true-value="'field4 3'" data-ng-false-value='false' /> field4 3</li>
</ul>
</div>
</div>
</div>
app.js:
var testmodule = angular.module('myModule', []);
testmodule.controller('TestCtrl', function ($scope, $filter) {
// init
$scope.sort = {
sortingOrder : 'id',
reverse : false
};
$scope.gap = 2;
$scope.filteredItems = [];
$scope.groupedItems = [];
$scope.itemsPerPage = 4;
$scope.pagedItems = [];
$scope.currentPage = 0;
$scope.items = [
{"id":1,"name":"name 1","description":"description 1","field4":"field4 1","field5":"field5 1"},
{"id":2,"name":"name 2","description":"description 2","field4":"field4 2","field5":"field5 2"},
{"id":3,"name":"name 3","description":"description 3","field4":"field4 3","field5":"field5 3"},
{"id":4,"name":"name 1","description":"description 1","field4":"field4 1","field5":"field5 4"},
{"id":5,"name":"name 2","description":"description 1","field4":"field4 3","field5":"field5 5"},
{"id":6,"name":"name 3","description":"description 3","field4":"field4 2","field5":"field5 6"},
{"id":7,"name":"name 3","description":"description 1","field4":"field4 1","field5":"field5 7"},
{"id":8,"name":"name 2","description":"description 2","field4":"field4 2","field5":"field5 8"},
{"id":9,"name":"name 1","description":"description 2","field4":"field4 3","field5":"field5 9"},
{"id":10,"name":"name 1","description":"description 1","field4":"field4 1","field5":"field5 10"}
];
var searchMatch = function (haystack, needle) {
if (!needle) {
return true;
}
return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
};
$scope.filterItems = function(item) {
if ($scope.pagedItems.name !== undefined && $scope.pagedItems.description !== undefined && $scope.pagedItems.field4 !== undefined && $scope.pagedItems.name !== 'false' && $scope.pagedItems.description !== 'false' && $scope.pagedItems.field4 !== 'false') {
if (item.name === $scope.pagedItems.name && item.description === $scope.pagedItems.description && item.field4 === $scope.pagedItems.field4) {
return true;
}
} else if ($scope.pagedItems.name !== undefined && $scope.pagedItems.field4 !== undefined && $scope.pagedItems.name !== 'false' && $scope.pagedItems.field4 !== 'false') {
if (item.name === $scope.pagedItems.name && item.field4 === $scope.pagedItems.field4) {
return true;
}
} else if ($scope.pagedItems.description !== undefined && $scope.pagedItems.field4 !== undefined && $scope.pagedItems.description !== 'false' && $scope.pagedItems.field4 !== 'false') {
if (item.description === $scope.pagedItems.description && item.field4 === $scope.pagedItems.field4) {
return true;
}
} else if ($scope.pagedItems.name !== undefined && $scope.pagedItems.description !== undefined && $scope.pagedItems.name !== 'false' && $scope.pagedItems.description !== 'false') {
if (item.name === $scope.pagedItems.name && item.description === $scope.pagedItems.description) {
return true;
}
} else {
if (item.name === $scope.pagedItems.name) {
return true;
}
if (item.description === $scope.pagedItems.description) {
return true;
}
if (item.field4 === $scope.pagedItems.field4) {
return true;
}
if (item.field4.indexOf($scope.pagedItems.field4) > -1 && $scope.pagedItems.field4 !== '') {
return true;
}
return false;
}
};
// init the filtered items
$scope.search = function () {
$scope.filteredItems = $filter('filter')($scope.items, function (item) {
for(var attr in item) {
if (searchMatch(item[attr], $scope.query))
return true;
}
return false;
});
// take care of the sorting order
if ($scope.sort.sortingOrder !== '') {
$scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sort.sortingOrder, $scope.sort.reverse);
}
$scope.currentPage = 0;
// now group by pages
$scope.groupToPages();
};
// calculate page in place
$scope.groupToPages = function () {
$scope.pagedItems = [];
for (var i = 0; i < $scope.filteredItems.length; i++) {
if (i % $scope.itemsPerPage === 0) {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredItems[i] ];
} else {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
}
}
};
$scope.range = function (size,start, end) {
var ret = [];
console.log(size,start, end);
if (size < end) {
end = size;
start = size-$scope.gap;
}
for (var i = start; i < end; i++) {
ret.push(i);
}
console.log(ret);
return ret;
};
$scope.prevPage = function () {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.nextPage = function () {
if ($scope.currentPage < $scope.pagedItems.length - 1) {
$scope.currentPage++;
}
};
$scope.setPage = function () {
$scope.currentPage = this.n;
};
// functions have been describe process the data for display
$scope.search();
});
testmodule.$inject = ['$scope', '$filter'];
testmodule.directive("customSort", function() {
return {
restrict: 'A',
transclude: true,
scope: {
order: '=',
sort: '='
},
template :
' <a ng-click="sort_by(order)" style="color: #555555;">'+
' <span ng-transclude></span>'+
' <i ng-class="selectedCls(order)"></i>'+
'</a>',
link: function(scope) {
// change sorting order
scope.sort_by = function(newSortingOrder) {
var sort = scope.sort;
if (sort.sortingOrder == newSortingOrder){
sort.reverse = !sort.reverse;
}
sort.sortingOrder = newSortingOrder;
};
scope.selectedCls = function(column) {
if(column == scope.sort.sortingOrder){
return ('icon-chevron-' + ((scope.sort.reverse) ? 'down' : 'up'));
}
else{
return'icon-sort'
}
};
}// end link
}
});
Please let me know that what I have done wrong here and let me know how to filter it properly. Created Fiddle. Thanks in advance !
Aucun commentaire:
Enregistrer un commentaire