角JS多个复选框以自定义过滤器 [英] angular js multiple checkbox with custom filters

问题描述

能有人帮我在建设的角度JS customfilter。

can some one help me in building angular js customfilter.

我已经建立了两个动态滤波器（品牌和招商）从记录（JSON数据）进行过滤多个复选框中的记录。

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.

我的JSON数据是

$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是

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

在这里fiidle： http://jsfiddle.net/Hp4W7/106/

先谢谢了。

推荐答案

下面是或案例过滤器。它会返回结果相匹配的商家或品牌的项目。

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

例如： http://jsfiddle.net/TheSharpieOne/ZebC7/

什么加入：

我们需要一些东西来存储复选框选中，这将是一个对象，是商家或品牌，是真实价值的关键，如果虚假它被选中/。
接下来我们来看看通过对象来确定选择什么，做你想做的searchFilter方法​​，它被传递到重复的过滤器。

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>

下面是增加的控制

$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];
            });
        }
    }
};

更新

提出的选中的复选框首先出现，并改变了搜索过滤器和

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

例如： 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.

这篇关于角JS多个复选框以自定义过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！