2

有人可以帮助我构建 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>

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

提前致谢。

4

1 回答 1

3

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

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

添加了什么：

我们需要一些东西来存储选中的复选框，它将是一个对象，键是商家或品牌，如果选中，则值为真/假。然后我们查看对象以确定选择的内容并在 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;
        }
    }
};

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

于 2013-08-29T23:43:20.020 回答