I Need to Implement simple Excel Like Filer for table using angulajs(v.1) I'm getting stuck please help me, I have added my code snippet below. I want to show filtered Data in table after checked checkbox and clicked on OK button. I'm doing this using model but not getting solution, how i can achieve this?
我需要使用angulajs（v.1）为表格实现简单的Excel Like Filer我遇到了困难请帮助我，我在下面添加了我的代码片段。我想在选中复选框后显示表格中的过滤数据，然后单击确定按钮。我这样做是使用模型，但没有得到解决方案，我怎么能做到这一点？
var myApp = angular.module('myApp', [])
myApp.filter('unique', function () {
return function (arr, field) {
var o = {}, i, l = arr.length, r = [];
for (i = 0; i .changeType {
background: #eee;
border-radius: 2px;
border: 1px solid #bbb;
color: #bbb;
font-size: 10px;
line-height: 9px;
padding: 4px;
float: right;
}
.changeType:before {
content: "\25BC ";
}
{{error}}
Country
Filter by value
-
City
Name
{{emp.City}}
{{emp.Name}}
{{emp.Country}}
4
We want to
我们想
counrtySearch text-fieldcounrtySearch text-field and selected check-boxes.Step 1:
步骤1：
First we need to create a mapping of unique country names. We need a list of unique country names (for iteration) and a dictionary of unique country names (for easy access without looping). The following function returns both.
首先，我们需要创建唯一国家/地区名称的映射。我们需要一个唯一的国家/地区名称列表（用于迭代）和一个唯一的国家/地区名称字典（以便在不循环的情况下轻松访问）。以下函数返回两者。
function categorize(arr, field) {
var o = {}, r = [], i, l = arr.length;
for (i = 0; i Step 2:
第2步：
To filter country-list by countrySearch add a countryFilter and bind ng-model to checkboxes.
要按国家/地区筛选country-list，请添加countryFilter并将ng-model绑定到复选框。
$scope.countryFilter = function (country) {
return $scope.countrySearch.length == 0 ? true : country.name.match(new RegExp($scope.countrySearch,'i'));
};
Step 3:
第3步：
To filter employees by countrySearch and selected check-boxes add the following filter.
要按国家/地区搜索和选中的复选框过滤员工，请添加以下过滤器。
{{emp.Country}}
{{emp.Name}}
{{emp.City}}
$scope.rowFilter = function (item) {
return $scope.Countries.dict[item.Country].checked && ($scope.countrySearch.length?item.Country.match(new RegExp($scope.countrySearch,'i')):true);
};
For batch select add this method to scope and call markAll(true) to select all, markAll(false) to select none.
对于批处理选择，将此方法添加到范围并调用markAll（true）以选择all，markAll（false）以选择none。
$scope.markAll=(b)=>{
$scope.Countries.list.forEach(function(x){x.checked=b;});
}
Working Snippet:
工作片段：
var myApp = angular.module('myApp', [])
.controller('employeeController', function ($scope) {
$scope.countrySearch = "";
$scope.employees = employees;
$scope.Countries = categorize(employees, 'Country');
$scope.countryFilter = function (country) {
return $scope.countrySearch.length ? country.name.match(new RegExp($scope.countrySearch,'i')):true;
};
$scope.rowFilter = function (item) {
return $scope.Countries.dict[item.Country].checked && ($scope.countrySearch.length?item.Country.match(new RegExp($scope.countrySearch,'i')):true);
};
$scope.markAll=(b)=>{
$scope.Countries.list.forEach(function(x){x.checked=b;});
}
})
function categorize(arr, field) {
var o = {}, r = [], i, l = arr.length;
for (i = 0; i .changeType {
background: #eee;
border-radius: 2px;
border: 1px solid #bbb;
color: #bbb;
font-size: 10px;
line-height: 9px;
padding: 4px;
float: right;
}
.changeType:before {
content: "\25BC ";
}
{{error}}
Country
Close(X)
Filter by value
-
Name
City
{{emp.Country}}
{{emp.Name}}
{{emp.City}}
Modifying it slightly we can apply filter to multiple columns
稍微修改它我们可以将过滤器应用于多个列
var myApp = angular.module('myApp', [])
.controller('employeeController', function($scope) {
$scope.XLfilters = {
list: [],
dict: {}
};
$scope.markAll = function(field, b) {
$scope.XLfilters.dict[field].list.forEach((x) => {x.checked=b;});
}
$scope.clearAll = function(field) {
$scope.XLfilters.dict[field].searchText='';
$scope.XLfilters.dict[field].list.forEach((x) => {x.checked=true;});
}
$scope.itemFilter = function(field) {
var xfilter = $scope.XLfilters.dict[field];
if (xfilter.searchText.length == 0) return xfilter.list;
var rxp = new RegExp(xfilter.searchText, 'i');
return xfilter.list.filter(function(item) {
return item.name.match(rxp);
});
};
$scope.rowFilter = function(item) {
var visible = true;
for(var cat,i=0,l=$scope.XLfilters.list.length;i.changeType {
background: #eee;
border-radius: 2px;
border: 1px solid #bbb;
color: #bbb;
font-size: 10px;
line-height: 9px;
padding: 4px;
float: right;
}
.changeType:before {
content: "\25BC ";
}
.options {
height: 150px;
overflow-y: scroll;
}
a.filterlink{
font-size: 12px;
}
Country
City
Name
{{emp.Country}}
{{emp.City}}
{{emp.Name}}
Angular digest cycle optimized multiple column filtering:
角度摘要周期优化多列过滤：
var myApp = angular.module('myApp', [])
.controller('employeeController', function($scope) {
$scope.XLfilters = { list: [], dict: {}, results: [] };
$scope.markAll = function(field, b) {
$scope.XLfilters.dict[field].list.forEach((x) => {x.checked=b;});
}
$scope.clearAll = function(field) {
$scope.XLfilters.dict[field].searchText='';
$scope.XLfilters.dict[field].list.forEach((x) => {x.checked=true;});
}
$scope.XLfiltrate = function() {
var i,j,k,selected,blocks,filter,option, data=$scope.XLfilters.all,filters=$scope.XLfilters.list;
$scope.XLfilters.results=[];
for (j=0; j0||selected>0;
}
for (i=0; i{x.visible=true});
}
}
for (j=0; j .filterdropdown{
background: #eee;
border: 1px solid #bbb;
color: #bbb;
border-radius: 2px;
font-size: 14px;
line-height: 14px;
}
.filterdropdown.active{
color: #005b9c;
}
a.filterlink{
font-size: 12px;
}
.options {
height: 150px;
overflow-y: scroll;
}
Country
City
Name
{{emp.Country}}
{{emp.City}}
{{emp.Name}}
1
Change ng-model to have one dummy variable lets say emp.status whose value will be either true or false based on clicking checkbox.
将ng-model更改为具有一个虚拟变量可以说emp.status的值基于单击复选框的值为true或false。
HTML country dropdown
HTML国家/地区下拉菜单
Controller :
控制器：
var countrySet = [];
$scope.employees=employees;
$scope.showResults=employees;
function _setFilterData(){
var emplList = angular.copy(employees);
$scope.showResults = emplList.filter(function(v, idx){
return countrySet.includes(v.Country)
});
}
$scope.yourFunction = function(checkBoxStatus, country){
var index = countrySet.indexOf( country );
if(checkBoxStatus && index === -1 ) {
countrySet.push( country);
}else{
countrySet.splice( index, 1 );
}
_setFilterData();
console.error(checkBoxStatus, country, countrySet);
}
Please check plunker for functionality : https://plnkr.co/edit/aXhvM0?p=preview
请检查plunker的功能：https：//plnkr.co/edit/aXhvM0？p = preview
NOTE: Never mind CSS on plunker
注意：不要介意关于plunker的CSS
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有