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>

这里有一个文件：http://jsfiddle.net/Hp4W7/106/

提前致谢。

Answer 1

这是OR案例过滤器。它将返回与商家OR品牌匹配的商品的结果。

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

添加了什么：

我们需要一些东西来存储选中的复选框，它将是一个对象，密钥是商家或品牌，如果被选中，则值为true / false。然后我们查看对象以确定所选内容并在searchFilter方法中执行任何操作，并将其传递给repeat的过滤器。

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

需要进行一些清理工作，但您可以看到如何完成所有工作。

带有自定义过滤器的angular js multiple复选框

1 个答案: