angularjs - 带有自定义过滤器的 Angular js 多个复选框

Question

有人可以帮助我构建 angular js customfilter。

我从记录(Json 数据)中构建了两个动态过滤器(品牌和商家)来过滤具有多个复选框的记录。

现在我需要根据选中的复选框过滤记录。
最初应取消选中所有复选框，并应显示所有记录。

根据选择的过滤器，应选择记录。

我的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>

这里是 fiddle : http://jsfiddle.net/Hp4W7/106/

提前致谢。

Answer 1

这是 OR case 过滤器。它将返回与商家或品牌匹配的项目的结果。

示例:http://jsfiddle.net/TheSharpieOne/ZebC7/

添加的内容:

我们需要一些东西来存储选中的复选框，它将是一个对象，键是商家或品牌，如果选中，则值为 true/false。
然后我们查看对象以确定选择了什么，并在 searchFilter 方法中执行您想要的任何操作，该方法将传递给重复的过滤器。

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

更新

使选中的复选框首先出现，并将搜索过滤器更改为“AND”

示例: http://jsfiddle.net/TheSharpieOne/ZebC7/1/

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

首先对选中的进行排序的功能(为两者都做了一个功能)

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

另外，将搜索过滤器更改为“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;
        }
    }
};

需要进行一些清理，但您可以看到这一切是如何完成的。