- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我需要使用 angulajs(v.1) 实现简单的 Excel Like Filer for table 我被卡住了请帮助我,我在下面添加了我的代码片段。我想在选中复选框并单击“确定”按钮后在表中显示过滤后的数据。我正在使用模型执行此操作但未获得解决方案,我该如何实现?
var myApp = angular.module('myApp', [])
myApp.filter('unique', function () {
return function (arr, field) {
var o = {}, i, l = arr.length, r = [];
for (i = 0; i < l; i += 1) {
o[arr[i][field]] = arr[i];
}
for (i in o) {
r.push(o[i]);
}
return r;
};
})
.controller('employeeController', function ($scope) {
var employees = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "France"
}, {
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
}, {
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Canada"
}];
$scope.employees=employees;
})
.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 ";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(document).on('click', '#tblbatch .dropdown-menu', function (e) {
e.stopPropagation();
});
</script>
<body ng-app="myApp">
<div ng-controller="employeeController">
<div class="container" style="margin-top:40px;">
<div class="row">
{{error}}
<div class="col-md-6">
<table class="table table-bordered table-condensed" >
<thead>
<tr>
<th>Country
<div class="dropdown" style="float: right">
<button id="btnSearchBatch" class="changeType dropdown-toggle" ng-click="getAllBatchID()" type="button" data-toggle="dropdown"></button>
<div class="dropdown-menu prop" aria-labelledby="btnSearchBatch" style="width: 250px; padding: 15px;">
<div class="col-md-12" style="padding: 0;">
<table style="width:100%">
<tr>
<th style="text-align: left">
<form class="" role="form">
Filter by value
<input id="txtSearch" type="text" class="form-control input-sm" ng-model="batchSearch" placeholder="Search" />
<div class="row">
<div class="col-md-offset-6 col-md-6">
<div class="row">
<div class="col-md-6" style="padding: 5px 0 0 0"><a href="#" style="font-size:12px">Select All</a></div>
<div class="col-md-6" style="padding: 5px 15px 0 5px">
<a href="#" style="font-size:12px">Clear</a>
</div>
</div>
</div>
</div>
<div class="row" style="border-bottom: 1px dotted #ccc!important;">
<div class="col-md-12">
<div style="height: 150px; overflow-y: scroll; width: 100%;">
<ul style="list-style-type: none; padding: 0">
<li ng-repeat="emp in employees | unique: 'Country' | filter: batchSearch">
<input id="chkTableList" type="checkbox" ng-model="search[bat.BatchID]" /> <label>{{emp.Country}}</label>
</li>
</ul>
</div>
</div>
</div>
<div class="row" style="margin-top: 8px;">
<div class="col-md-12" style="text-align: center">
<input id="btnOk" type="button" value="Ok" ng-click="FilterBatchData(BatchID)" class="btn btn-success btn-sm" style="background-color: #0f9d58; border-color: #18804e; color: #fff; padding: 3px; width: 60px;" />
<input id="btnCancel" type="button" value="Cancel" class="btn btn-default btn-sm" style="padding: 3px; width: 60px;" />
</div>
</div>
</form>
</th>
</tr>
</table>
</div>
</div>
</div></th>
<th>City</th>
<th>Name</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="emp in employees">
<td>{{emp.City}}</td>
<td>{{emp.Name}}</td>
<td>{{emp.Country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
最佳答案
我们想要
countrySearch
文本字段过滤国家/地区列表countrySearch
文本字段和选中的复选框过滤员工。第 1 步:
首先,我们需要创建唯一国家/地区名称的映射。我们需要一个包含唯一国家名称的列表(用于迭代)和一个包含唯一国家名称的字典(以便在不循环的情况下轻松访问)。以下函数返回两者。
function categorize(arr, field) {
var o = {}, r = [], i, l = arr.length;
for (i = 0; i < l; i += 1) {
if(o[arr[i][field]])continue;
var _o = {name:arr[i][field], checked:true};
o[arr[i][field]] = _o;
r.push(_o);
}
return {list:r, dict:o};
};
第 2 步:
要通过 countrySearch
过滤国家/地区列表,请添加 countryFilter 并将 ng-model
绑定(bind)到复选框。
<li ng-repeat="country in CountryList.list | filter: countryFilter">
<input id="chk{{$index}}" type="checkbox" ng-model="country.checked" />
<label for="chk{{$index}}">{{country.name}}</label>
</li>
$scope.countryFilter = function (country) {
return $scope.countrySearch.length == 0 ? true : country.name.match(new RegExp($scope.countrySearch,'i'));
};
第 3 步:
要按 countrySearch
和选中的复选框过滤员工,请添加以下过滤器。
<tr ng-repeat="emp in employees | filter: rowFilter">
<td>{{emp.Country}}</td>
<td>{{emp.Name}}</td>
<td>{{emp.City}}</td>
</tr>
$scope.rowFilter = function (item) {
return $scope.Countries.dict[item.Country].checked && ($scope.countrySearch.length?item.Country.match(new RegExp($scope.countrySearch,'i')):true);
};
对于批量选择,将此方法添加到范围并调用 markAll(true)
来选择所有,markAll(false)
来选择无。
$scope.markAll=(b)=>{
$scope.Countries.list.forEach(function(x){x.checked=b;});
}
工作片段:
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 < l; i += 1) {
if(o[arr[i][field]])continue;
var _o = {name:arr[i][field], checked:true};
o[arr[i][field]] = _o;
r.push(_o);
}
return {list:r, dict:o};
};
var employees = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "France"
}, {
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
}, {
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Canada"
}];
.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 ";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(document).on('click', '#tblbatch .dropdown-menu', function(e) {
e.stopPropagation();
});
</script>
<body ng-app="myApp">
<div ng-controller="employeeController">
<div class="container" style="margin-top:40px;">
<div class="row">
{{error}}
<div class="col-md-6">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Country
<div class="dropdown" style="float: right">
<button id="btnSearchBatch" class="changeType dropdown-toggle" ng-click="getAllBatchID()" type="button" data-toggle="dropdown"></button>
<div class="dropdown-menu prop" aria-labelledby="btnSearchBatch" style="width: 250px; padding: 15px;">
<div class="col-md-12" style="padding: 0;">
<table style="width:100%">
<tr>
<th style="text-align: left">
<a href="#" class="pull-right" data-dismiss="modal" style="font-size:12px">Close(X)</a>
<form class="" role="form">
Filter by value
<input type="text" class="form-control input-sm" ng-model="countrySearch" placeholder="Search" />
<div class="row">
<div class="col-md-offset-6 col-md-6">
<div class="row">
<div class="col-md-6" style="padding: 5px 15px 0 5px"><a href="#" ng-click="markAll(true)" style="font-size:12px">Select All</a> | <a href="#" ng-click="markAll(false)" style="font-size:12px">Select None</a></div>
</div>
</div>
</div>
<div class="row" style="border-bottom: 1px dotted #ccc!important;">
<div class="col-md-12">
<div style="height: 150px; overflow-y: scroll; width: 100%;">
<ul style="list-style-type: none; padding: 0">
<li ng-repeat="country in Countries.list | filter: countryFilter">
<input id="chk{{$index}}" type="checkbox" ng-model="country.checked" /> <label for="chk{{$index}}">{{country.name}}</label>
</li>
</ul>
</div>
</div>
</div>
</form>
</th>
</tr>
</table>
</div>
</div>
</div>
</th>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees | filter: rowFilter">
<td>{{emp.Country}}</td>
<td>{{emp.Name}}</td>
<td>{{emp.City}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
稍微修改一下,我们可以将过滤器应用于多个列
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<l;i++){
cat = $scope.XLfilters.list[i];
if(!cat.dict[item[cat.field]].checked) return false;
if(cat.searchText.length){
if(!item[cat.field].match(new RegExp(cat.searchText,'i'))) return false;
}
}
return true;
};
function createXLfilter(arr, field) {
if ($scope.XLfilters.dict[field]) return;
var cat = categorize(arr, field);
cat.field=field;
cat.searchText = "";
$scope.XLfilters.dict[field] = cat;
$scope.XLfilters.list.push(cat);
}
$scope.employees = employees;
createXLfilter(employees, 'Country');
createXLfilter(employees, 'City');
})
function categorize(arr, field) {
var o = {},
r = [],
i, l = arr.length;
for (i = 0; i < l; i += 1) {
if (o[arr[i][field]]) continue;
var _o = {name:arr[i][field], checked:true};
o[arr[i][field]] = _o;
r.push(_o);
}
return {
list: r,
dict: o
};
};
var employees = [{
"Name": "Manirul Monir",
"City": "Sylhet",
"Country": "Bangladesh"
}, {
"Name": "Arup",
"City": "Sylhet",
"Country": "Bangladesh"
}, {
"Name": "Person 1",
"City": "Dhaka",
"Country": "Bangladesh"
}, {
"Name": "Person 2",
"City": "Dhaka",
"Country": "Bangladesh"
}, {
"Name": "Munim Munna",
"City": "Narshigdi",
"Country": "Bangladesh"
}, {
"Name": "Mahfuz Ahmed",
"City": "Narshigdi",
"Country": "Bangladesh"
}, {
"Name": "Tawkir Ahmed",
"City": "Gazipur",
"Country": "Bangladesh"
}, {
"Name": "Alfreds 2",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "France"
}];
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-md-6" ng-app="myApp" ng-controller="employeeController">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Country
<div class="dropdown" style="float: right">
<button id="btnSearchBatch" class="changeType dropdown-toggle" type="button" data-toggle="dropdown"></button>
<div class="dropdown-menu prop" aria-labelledby="btnSearchBatch" style="width: 250px; padding: 15px;">
<div class="text-right">
<a href="#" class="filterlink" ng-click="clearAll('Country')">Clear All</a> | <a href="#" class="filterlink" data-dismiss="modal">Close(X)</a>
</div>
<form>
<input type="text" class="form-control input-sm" ng-model="XLfilters.dict['Country'].searchText" placeholder="Filter by Country" />
<div>
<a href="#" class="filterlink" ng-click="markAll('Country',true)">Select All</a> | <a href="#" class="filterlink" ng-click="markAll('Country',false)">Select None</a>
</div>
<div class="options">
<ul style="list-style-type: none; padding: 0">
<li ng-repeat="item in itemFilter('Country')">
<input id="countryOption{{$index}}" type="checkbox" ng-model="item.checked" /> <label for="countryOption{{$index}}">{{item.name}}</label>
</li>
</ul>
</div>
</form>
</div>
</div>
</th>
<th>City
<div class="dropdown" style="float: right">
<button id="btnSearchBatch" class="changeType dropdown-toggle" type="button" data-toggle="dropdown"></button>
<div class="dropdown-menu prop" aria-labelledby="btnSearchBatch" style="width: 250px; padding: 15px;">
<div class="text-right">
<a href="#" class="filterlink" ng-click="clearAll('City')">Clear All</a> | <a href="#" class="filterlink" data-dismiss="modal">Close(X)</a>
</div>
<form>
<input type="text" class="form-control input-sm" ng-model="XLfilters.dict['City'].searchText" placeholder="Filter by City" />
<div>
<a href="#" class="filterlink" ng-click="markAll('City',true)">Select All</a> | <a href="#" class="filterlink" ng-click="markAll('City',false)">Select None</a>
</div>
<div class="options">
<ul style="list-style-type: none; padding: 0">
<li ng-repeat="item in itemFilter('City')">
<input id="cityOption{{$index}}" type="checkbox" ng-model="item.checked" /> <label for="cityOption{{$index}}">{{item.name}}</label>
</li>
</ul>
</div>
</form>
</div>
</div>
</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees | filter: rowFilter">
<td>{{emp.Country}}</td>
<td>{{emp.City}}</td>
<td>{{emp.Name}}</td>
</tr>
</tbody>
</table>
</div>
Angular 摘要循环优化多列过滤:
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; j<filters.length; j++) {
filter=filters[j];
filter.regex = filter.searchText.length?new RegExp(filter.searchText, 'i'):false;
for(k=0,selected=0;k<filter.list.length;k++){
if(!filter.list[k].checked)selected++;
filter.list[k].visible=false;
filter.list[k].match=filter.regex?filter.list[k].title.match(filter.regex):true;
}
filter.isActive=filter.searchText.length>0||selected>0;
}
for (i=0; i<data.length; i++){
blocks={allows:[],rejects:[],mismatch:false};
for (j=0; j<filters.length; j++) {
filter=filters[j]; option=filter.dict[data[i][filter.field]];
(option.checked?blocks.allows:blocks.rejects).push(option);
if(filter.regex && !option.match) blocks.mismatch=true;
}
if(blocks.rejects.length==1) blocks.rejects[0].visible=true;
else if(blocks.rejects.length==0&&!blocks.mismatch){
$scope.XLfilters.results.push(data[i]);
blocks.allows.forEach((x)=>{x.visible=true});
}
}
for (j=0; j<filters.length; j++) {
filter=filters[j];filter.options=[];
for(k=0;k<filter.list.length;k++){
if(filter.list[k].visible && filter.list[k].match) filter.options.push(filter.list[k]);
}
}
}
function createXLfilters(arr, fields) {
$scope.XLfilters.all = arr;
for (var j=0; j<fields.length; j++) $scope.XLfilters.list.push($scope.XLfilters.dict[fields[j]]={list:[],dict:{},field:fields[j],searchText:"",active:false,options:[]});
for (var i=0,z; i<arr.length; i++) for (j=0; j<fields.length; j++) {
z=$scope.XLfilters.dict[fields[j]];
z.dict[arr[i][fields[j]]] || z.list.push(z.dict[arr[i][fields[j]]]={title:arr[i][fields[j]],checked:true, visible:false,match:false});
}
}
createXLfilters(employees, ['Country','City']);
})
var employees = [{
"Name": "Manirul Monir",
"City": "Sylhet",
"Country": "Bangladesh"
}, {
"Name": "Arup",
"City": "Sylhet",
"Country": "Bangladesh"
}, {
"Name": "Person 1",
"City": "Dhaka",
"Country": "Bangladesh"
}, {
"Name": "Person 2",
"City": "Dhaka",
"Country": "Bangladesh"
}, {
"Name": "Munim Munna",
"City": "Narshingdi",
"Country": "Bangladesh"
}, {
"Name": "Mahfuz Ahmed",
"City": "Narshingdi",
"Country": "Bangladesh"
}, {
"Name": "Tawkir Ahmed",
"City": "Gazipur",
"Country": "Bangladesh"
}, {
"Name": "Alfreds 2",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "France"
}];
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-md-6" ng-app="myApp" ng-controller="employeeController">
<table class="table table-bordered table-condensed" data="{{XLfiltrate()}}">
<thead>
<tr>
<th>Country
<div class="dropdown" style="float: right">
<button class="dropdown-toggle filterdropdown" ng-class="{active:XLfilters.dict['Country'].isActive}" type="button" data-toggle="dropdown"><span class="glyphicon glyphicon-filter"></span></button>
<div class="dropdown-menu prop" aria-labelledby="btnSearchBatch" style="width: 250px; padding: 15px;">
<div class="text-right">
<a href="#" class="filterlink" ng-click="clearAll('Country')">Clear All</a> | <a href="#" class="filterlink" data-dismiss="modal">Close(X)</a>
</div>
<form>
<input type="text" class="form-control input-sm" ng-model="XLfilters.dict['Country'].searchText" placeholder="Filter by Country" />
<div>
<a href="#" class="filterlink" ng-click="markAll('Country',true)">Select All</a> | <a href="#" class="filterlink" ng-click="markAll('Country',false)">Select None</a>
</div>
<div class="options">
<ul style="list-style-type: none; padding: 0">
<li ng-repeat="item in XLfilters.dict['Country'].options">
<input id="countryOption{{$index}}" type="checkbox" ng-model="XLfilters.dict['Country'].dict[item.title].checked" /> <label for="countryOption{{$index}}">{{item.title}}</label>
</li>
</ul>
</div>
</form>
</div>
</div>
</th>
<th>City
<div class="dropdown" style="float: right">
<button class="dropdown-toggle filterdropdown" ng-class="{active:XLfilters.dict['City'].isActive}" type="button" data-toggle="dropdown"><span class="glyphicon glyphicon-filter"></span></button>
<div class="dropdown-menu prop" aria-labelledby="btnSearchBatch" style="width: 250px; padding: 15px;">
<div class="text-right">
<a href="#" class="filterlink" ng-click="clearAll('City')">Clear All</a> | <a href="#" class="filterlink" data-dismiss="modal">Close(X)</a>
</div>
<form>
<input type="text" class="form-control input-sm" ng-model="XLfilters.dict['City'].searchText" placeholder="Filter by City" />
<div>
<a href="#" class="filterlink" ng-click="markAll('City',true)">Select All</a> | <a href="#" class="filterlink" ng-click="markAll('City',false)">Select None</a>
</div>
<div class="options">
<ul style="list-style-type: none; padding: 0">
<li ng-repeat="item in XLfilters.dict['City'].options">
<input id="cityOption{{$index}}" type="checkbox" ng-model="XLfilters.dict['City'].dict[item.title].checked" /> <label for="cityOption{{$index}}">{{item.title}}</label>
</li>
</ul>
</div>
</form>
</div>
</div>
</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in XLfilters.results">
<td>{{emp.Country}}</td>
<td>{{emp.City}}</td>
<td>{{emp.Name}}</td>
</tr>
</tbody>
</table>
</div>
关于javascript - 如何在 angularjs 中实现类似 Excel 的过滤器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49608761/
我有一个对象数组,我想在键传入“filter”过滤器时提取值。下面是我尝试过的 Controller 代码片段,但我得到的响应类型未定义。请帮我找出哪里出错了。 var states = [{"HI
如果任何 J2EE 应用程序直接访问 servlet,然后 servlet 将相同的请求转发到某个 .jsp 页面。 request.getRequestDispatcher("Login.jsp")
我有一个带有图像缩略图的表单,可以通过复选框进行选择以进行下载。我想要一个包含 jQuery 中图像的数组,用于 Ajax 调用。 2个问题: - 表格顶部有一个复选框,用于切换我想要从映射中排除的所
我必须从服务器转储数据库,将 .sql 传输到另一台服务器,然后运行以下脚本以使用此语法删除某些行: DELETE wp_posts FROM wp_posts INNER JOIN wp_postm
我想从目录中过滤掉特定类型的文件,但收到错误“ token 语法错误,删除这些 token ”: File dir = new File("c:/etc/etc"); File[] f
几乎所有的 Web 应用程序都依赖外部的输入。这些数据通常来自用户或其他应用程序(比如 web 服务)。通过使用过滤器,您能够确保应用程序获得正确的输入类型。 您应该始终对外部数据进行过滤! 输
我正在开发一个由 OData 服务提供支持的搜索功能。它将返回一个或一列标题对象作为结果。我们需要搜索的许多字段不在标题对象中。它们仅在子对象(导航属性)中。能够针对子字段执行 OData 搜索并仍然
假设我有以下模型,它有一个方法 variants(): class Example(models.Model): text = models.CharField(max_length=255)
我有一个默认的列表列表,但我基本上想这样做: myDefaultDict = filter(lambda k: len(k)>1, myDefaultDict) 除了它似乎只适用于列表。我能做什么?
我正在使用 django-filter 来输出我的模型的过滤结果。那里没有问题。下一步是添加一个分页器……尽管现在已经苦苦挣扎了好几天。 views.py: def funds_overview(re
我正在做一个概念证明,我正在试验一种奇怪的行为。 我有一个按日期字段按范围分区的表,如果我设置固定日期或由 SYSDATE 创建的日期,查询的成本会发生很大变化。 这些是解释计划: SQL> SELE
如果一个或另一个值匹配,是否可以制作一个过滤器,例如一个中性的 PropertyFilter(并传递给链中的下一个过滤器)?就像是: value1 val
我是 VBA 初学者,正在尝试根据单元格值过滤数据,经过一番谷歌搜索后,我编写了一个有效的代码 Sub FilterDepartment_Sales() Sheet6.Activate
假设我在 excel 数据透视表中有两个过滤器。 两者最初都会显示筛选列的选定范围内的所有值。 当我仅在过滤器 1 中选择几个值时,过滤器 2 仍会继续显示基础数据中所选范围内特定过滤器列中的所有值。
是否可以定义自定义 build-ins (名称不再适合)在 ftl? 由于语义前提,我不想让它成为一个函数,而是一个内置的。 最佳答案 这是不可能的,?语法是为内置函数保留的。 (顺便说一句,这意味着
我试图在 Edit | 之外添加一个链接通过插件删除wordpress管理员>用户>所有用户列表中的链接..这是我第一次尝试通过查看其他插件或搜索google来制作wordpress插件.. 我添加了
我正在尝试按照以下教程使用 django 过滤器进行分页,但该教程似乎缺少某些内容,而且我无法使用基于函数的 View 方法显示分页。 https://simpleisbetterthancomple
由于我是 Powershell 新手,因此寻求最佳实践方面的帮助, 我有一个 csv 文件,我想过滤掉 csv 中的每一行,除了包含“未安装”的行 然后,我想根据包含计算机列表的单独 csv 文件过滤
我正在尝试创建一个搜索查询,它会告诉我我作为审阅者添加到其中的打开更改,但我还没有提交最新补丁集的代码审查。这应该包括其他人已经评论过的更改,但我没有。 我能找到的最接近的是 is:reviewer
在我的 Web 应用程序中,我有 3 个主要部分 1. 客户 2. 供应商 3. 管理员 我正在使用 java session 过滤器来检查用户 session 并允许访问网站的特定部分。 因此客户只
我是一名优秀的程序员,十分优秀!