带有自定义过滤器的 Angular js 多个复选框 [英] angular js multiple checkbox with custom filters
问题描述
有人可以帮助我构建 angular js customfilter.
我从记录(Json 数据)中构建了两个动态过滤器(品牌和商家)来过滤具有多个复选框的记录.
现在我需要根据选中的复选框过滤记录.最初应取消选中所有复选框，并应显示所有记录.
根据选择的过滤器，应选择记录.
我的json数据是
$scope.records = [{"MerchantName": "时尚与你","BrandList": "Nike, Fila",描述":时尚与你商店"},{"MerchantName": "时尚与你","BrandList": "李维斯、Fasttrack、Fila",描述":时尚与你商店"},{"MerchantName": "ebay","BrandList": "诺基亚、HTC、三星",描述":易趣商店"},{"MerchantName": "亚马逊","BrandList": "苹果、戴尔、三星",描述":亚马逊商店"},{"MerchantName": "亚马逊",BrandList":佩佩牛仔裤，彼得英格兰，繁文缛节"，描述":亚马逊商店"}];HTML 是
{{记录.描述}}这里是fiidle:http://jsfiddle.net/Hp4W7/106/
提前致谢.
这里是 OR case 过滤器.它将返回与商家或品牌匹配的商品的结果.
示例:http://jsfiddle.net/TheSharpieOne/ZebC7/
添加的内容:
我们需要一些东西来存储选中的复选框，它将是一个对象，键是商家或品牌，如果选中，则值为 true/false.然后我们查看对象以确定选择了什么并在 searchFilter 方法中执行您想要的任何操作，该方法将传递给重复的过滤器.
这是对控件的添加"
$scope.merchantCheckboxes = {};$scope.brandCheckboxes = {};函数 getChecked(obj){变量检查 = [];for(var key in obj) if(obj[key]) checked.push(key);退货检查；}$scope.searchFilter = 函数(行){var mercChecked = getChecked($scope.merchantCheckboxes);var brandChecked = getChecked($scope.brandCheckboxes);if(mercChecked.length == 0 &&brandChecked.length == 0)返回真；别的{if($scope.merchantCheckboxes[row.MerchantName])返回真；别的{return row.BrandList.split(/,\s*/).some(function(brand){返回 $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])返回0；else if(item.brandname && item.brandname.split(/,\s*/).some(function(brand){返回 $scope.brandCheckboxes[brand];}))返回0；别的返回 1；};另外，将搜索过滤器更改为AND"
$scope.searchFilter = function(row){var mercChecked = getChecked($scope.merchantCheckboxes);var brandChecked = getChecked($scope.brandCheckboxes);if(mercChecked.length == 0 &&brandChecked.length == 0)返回真；别的{if(($scope.merchantCheckboxes[row.MerchantName] &&brandChecked.length==0)||(mercChecked.length == 0 && row.BrandList.split(/,\s*/).some(function(brand){返回 $scope.brandCheckboxes[brand];}))||($scope.merchantCheckboxes[row.MerchantName] && row.BrandList.split(/,\s*/).some(function(brand){返回 $scope.brandCheckboxes[brand];})))返回真；别的{返回假；}}};需要进行一些清理，但您可以看到这一切是如何完成的.
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.
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.
这篇关于带有自定义过滤器的 Angular js 多个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
