angular js multiple checkbox with custom filters

Question

can some one help me in building angular js customfilter.

i have built two dynamic filters(brands and Merchants) from the records(Json data) to filter the records with multiple check boxes.

now i need to filter records based on checkboxes checked. Initially all the checkboxes should be unchecked and all the records should be displayed.

based on the filters selected the records should be selected.

my json data is

$scope.records = [
    {
     "MerchantName": "Fashion and You",
     "BrandList": " Nike, Fila",
     "Description": "Fashion and You Store"
    },
   {
    "MerchantName": "Fashion and You",
    "BrandList": " Levis, Fasttrack, Fila",
     "Description": "Fashion and You Store"
   },
   {
    "MerchantName": "ebay",
    "BrandList": "Nokia,HTC,Samsung",
    "Description": "Ebay Store"
  },
  {
    "MerchantName": "amazon",
    "BrandList": "Apple,Dell,Samsung",
     "Description": "amazon Store"
},
{
    "MerchantName": "amazon",
    "BrandList": " pepe jeans, peter england, red tape",
     "Description": "amazon Store"
}];

Html is

 <div ng-repeat="record in records">
    {{record.Description}}
 </div>

here the fiidle: http://jsfiddle.net/Hp4W7/106/

Thanks in advance.

Is this an "AND" filter or "OR", as in Amazon OR Dell / Amazon AND Dell? — TheSharpieOne
– TheSharpieOne, Commented Aug 29, 2013 at 23:37

TheSharpieOne · Accepted Answer · 2013-08-30 13:44:23Z

3

Here is the OR case filter. It will return results for items that match the merchant OR brand.

Example: http://jsfiddle.net/TheSharpieOne/ZebC7/

What was added:

We needed something to store the checkboxes checked, it will be an object, the key being the merchant or brand and the value being true/false if it is selected. Then we look through the objects to determine what is selected and do whatever you want in the searchFilter method, which is passed to the repeat's filter.

<label><input type="checkbox" ng-model="merchantCheckboxes[Merchant.Merchantname]" /> {{Merchant.Merchantname}}</label>

Here is the additions to the control"

$scope.merchantCheckboxes = {};
$scope.brandCheckboxes = {};
function getChecked(obj){
    var checked = [];
    for(var key in obj) if(obj[key]) checked.push(key);
    return checked;
}
$scope.searchFilter = function(row){
    var mercChecked = getChecked($scope.merchantCheckboxes);
    var brandChecked = getChecked($scope.brandCheckboxes);
    if(mercChecked.length == 0 && brandChecked.length == 0)
        return true;
    else{
        if($scope.merchantCheckboxes[row.MerchantName])
            return true;
        else{
            return row.BrandList.split(/,\s*/).some(function(brand){
                return $scope.brandCheckboxes[brand];
            });
        }
    }
};

UPDATE

Made the checked checkboxes appear first, and changed the search filter to "AND"

Example: http://jsfiddle.net/TheSharpieOne/ZebC7/1/

<li ng-repeat="Merchant in MerchantList| orderBy:[orderChecked,'Merchantname']">

Function to order the checked ones first (made one function for both)

$scope.orderChecked = function(item){
    if(item.Merchantname && $scope.merchantCheckboxes[item.Merchantname])
        return 0;
    else if(item.brandname && item.brandname.split(/,\s*/).some(function(brand){
                return $scope.brandCheckboxes[brand];
            }))
        return 0;
    else
        return 1;
};

Also, change the search filter to "AND"

$scope.searchFilter = function(row){
    var mercChecked = getChecked($scope.merchantCheckboxes);
    var brandChecked = getChecked($scope.brandCheckboxes);
    if(mercChecked.length == 0 && brandChecked.length == 0)
        return true;
    else{
        if(($scope.merchantCheckboxes[row.MerchantName] && brandChecked.length==0)
          || (mercChecked.length == 0 && row.BrandList.split(/,\s*/).some(function(brand){
                return $scope.brandCheckboxes[brand];
            }))
          || ($scope.merchantCheckboxes[row.MerchantName] && row.BrandList.split(/,\s*/).some(function(brand){
                return $scope.brandCheckboxes[brand];
            })))
            return true;
        else{
            return false;
        }
    }
};

Some cleanup is needed, but you can see how it all can be done.

edited Aug 30, 2013 at 13:44

answered Aug 29, 2013 at 23:43

TheSharpieOne

25.7k9 gold badges71 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nikhil reddy Over a year ago

This is an and filter, But i need to show checked items on the top of the filter as it is working on my fiddle

nikhil reddy Over a year ago

also do we have fleibility with builtin functions in angular to achieve this

TheSharpieOne Over a year ago

Not sure what you mean, but Angular provides the ability for developers to define their own functions to achieve this. That's about all we can utilize from them to achieve this. In Angular, you will notice a lack of certain abilities while other, very similar abilities are provided out of the box. I believe they (Google) mostly just add what they commonly needs and leave the rest to us. They do however provide a great way to extend angular making it easy to use.

Collectives™ on Stack Overflow

angular js multiple checkbox with custom filters

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related