Javascript 多选下拉过滤器AngularJS逻辑
感谢您抽出时间阅读我的问题。我目前正在使用AngularJS UI网格，我已经为“First Name”列实现了一个多选下拉菜单。然而，我在理解如何实现逻辑时遇到了一些问题，就像我在“男性”和“女性”专栏中所做的那样，因为这是多选的。如果有人可以帮助我的逻辑与例子，我已经创建了第一列“名字”。至少需要一些指导。提前谢谢你！ 此外，您可能会注意到网格被破坏，标题行被卡住并且没有水平滚动。这个问题已经解决了 这是普朗克！ 下面是我的一些Angular&HTML代码！ 我知道我的代码不是很枯燥，我将很快重构我的代码Javascript 多选下拉过滤器AngularJS逻辑,javascript,angularjs,ui-grid,Javascript,Angularjs,Ui Grid,感谢您抽出时间阅读我的问题。我目前正在使用AngularJS UI网格，我已经为“First Name”列实现了一个多选下拉菜单。然而，我在理解如何实现逻辑时遇到了一些问题，就像我在“男性”和“女性”专栏中所做的那样，因为这是多选的。如果有人可以帮助我的逻辑与例子，我已经创建了第一列“名字”。至少需要一些指导。提前谢谢你！ 此外，您可能会注意到网格被破坏，标题行被卡住并且没有水平滚动。这个问题已经解决了 这是普朗克！ 下面是我的一些Angular&HTML代码！ 我知道我的代码不是很枯燥，我将
安古拉斯普朗克
文件。写（“”）；
滤柱
&时代；
过滤列
列名：
过滤器：
价值：
名字
姓
单位
雇佣
性别
国家
出生日期
年龄
等于
包含
中间
不等于
大于
少于
名字
姓
单位
雇佣
性别
国家
出生日期
年龄
等于
包含
中间
不等于
大于
少于
名字
姓
单位
雇佣
性别
国家
出生日期
年龄
等于
包含
中间
不等于
大于
少于
名字
姓
单位
雇佣
性别
国家
出生日期
年龄
等于
包含
中间
不等于
大于
少于
名字
姓
单位
雇佣
性别
国家
出生日期
年龄
等于
包含
在贝蒂
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular-animate.js"></script>
<script data-require="angular-ui-bootstrap@*" data-semver="1.3.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>
<script data-require="ui-grid@*" data-semver="4.0.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-dropdown-multiselect/1.11.8/angularjs-dropdown-multiselect.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="bootstrap.js@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--LINK TAGS-->
<link data-require="ui-grid@*" data-semver="4.0.2" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.css" />
<link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="mainCtrl">
<button id="filterButton" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Filter Columns</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><strong>Filter Columns</strong></h4>
</div>
<div class="modal-body">
<table>
<thead>
<tr>
<th>Column Name:</th>
<th>Filter:</th>
<th>Value:</th>
</tr>
</thead>
<tbody>
<tr>
<!-- FIRST COLUMN ROW -->
<td>
<select ng-model="columnName" class="form-control" class="columnName">
<option></option>
<option>First Name</option>
<option>Last Name</option>
<option>Company</option>
<option>Employed</option>
<option>Gender</option>
<option>Country</option>
<option>DOB</option>
<option>Age</option>
</select>
</td>
<td>
<select ng-model="filter" class="form-control" class="filter">
<option>Equal to</option>
<option>Contains</option>
<option>in between</option>
<option>Not equal to</option>
<option>Greater than</option>
<option>Less than</option>
</select>
</td>
<td>
<input class="form-control" type="text">
</td>
<!-- FIRST COLUMN ROW -->
</tr>
<tr>
<!-- SECOND COLUMN ROW -->
<td>
<select class="form-control" class="columnName">
<option></option>
<option>First Name</option>
<option>Last Name</option>
<option>Company</option>
<option>Employed</option>
<option>Gender</option>
<option>Country</option>
<option>DOB</option>
<option>Age</option>
</select>
</td>
<td>
<select class="form-control" class="filter">
<option>Equal to</option>
<option>Contains</option>
<option>in between</option>
<option>Not equal to</option>
<option>Greater than</option>
<option>Less than</option>
</select>
</td>
<td>
<input class="form-control" type="text">
<!-- SECOND COLUMN ROW -->
</tr>
<tr>
<!-- THIRD COLUMN ROW -->
<td>
<select class="form-control" class="columnName">
<option></option>
<option>First Name</option>
<option>Last Name</option>
<option>Company</option>
<option>Employed</option>
<option>Gender</option>
<option>Country</option>
<option>DOB</option>
<option>Age</option>
</select>
</td>
<td>
<select class="form-control" class="filter">
<option>Equal to</option>
<option>Contains</option>
<option>in between</option>
<option>Not equal to</option>
<option>Greater than</option>
<option>Less than</option>
</select>
</td>
<td>
<input class="form-control" type="text">
</td>
<!-- THIRD COLUMN ROW -->
</tr>
<tr>
<!-- FORTH COLUMN ROW -->
<td>
<select class="form-control" class="columnName">
<option></option>
<option>First Name</option>
<option>Last Name</option>
<option>Company</option>
<option>Employed</option>
<option>Gender</option>
<option>Country</option>
<option>DOB</option>
<option>Age</option>
</select>
</td>
<td>
<select class="form-control" class="filter">
<option>Equal to</option>
<option>Contains</option>
<option>in between</option>
<option>Not equal to</option>
<option>Greater than</option>
<option>Less than</option>
</select>
</td>
<td>
<input class="form-control" type="text">
</td>
<!-- FORTH COLUMN ROW -->
</tr>
<tr>
<!-- FIFTH COLUMN ROW -->
<td>
<select class="form-control" class="columnName">
<option></option>
<option>First Name</option>
<option>Last Name</option>
<option>Company</option>
<option>Employed</option>
<option>Gender</option>
<option>Country</option>
<option>DOB</option>
<option>Age</option>
</select>
</td>
<td>
<select class="form-control" class="filter">
<option>Equal to</option>
<option>Contains</option>
<option>in between</option>
<option>Not equal to</option>
<option>Greater than</option>
<option>Less than</option>
</select>
</td>
<td>
<input class="form-control" type="text">
</td>
<!-- FIFTH COLUMN ROW -->
</tr>
<tr>
<!-- SIXTH COLUMN ROW -->
<td>
<select class="form-control" class="columnName">
<option></option>
<option>First Name</option>
<option>Last Name</option>
<option>Company</option>
<option>Employed</option>
<option>Gender</option>
<option>Country</option>
<option>DOB</option>
<option>Age</option>
</select>
</td>
<td>
<select class="form-control" class="filter">
<option>Equal to</option>
<option>Contains</option>
<option>in between</option>
<option>Not equal to</option>
<option>Greater than</option>
<option>Less than</option>
</select>
</td>
<td>
<input class="form-control" type="text">
</td>
</tr>
<!-- SIXTH COLUMN ROW -->
</tbody>
</table>
<a href="#">add filter</a>
</div>
<div class="modal-footer">
<button id="applyButton" type="button" class="btn btn-primary">Apply Filters</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<br>
<br>
<h1>Hello World</h1>
<div ui-grid="gridOptions" ui-grid-pagination ui-grid-exporter ui-grid-resize-columns ui-grid-selection ui-grid-move-columns ui-grid-edit ui-grid-pinning class="myGrid" ng-model="columnName">
</div>
</body>
</html>
var myApp = angular.module("myApp.bootstrap",["ngAnimate",
"ui.bootstrap", "ui.grid", "ui.grid.moveColumns", "ui.grid.edit",
"ui.grid.selection", "ui.grid.resizeColumns", "ui.grid.exporter",
"ui.grid.pagination", "ui.grid.pinning", "angularjs-dropdown-multiselect"]);
myApp.controller('mainCtrl', ['$scope', 'uiGridConstants', function ($scope, uiGridConstants) {
$scope.example1model = [];
$scope.example1data = [{
id: 1, label: "Cox"},{
id: 2, label: "Lorraine"},{
id: 4, label: "Nancy"},{
id: 5, label: "Laura"},{
id: 6, label: "Ana"},{
id: 7, label: "Feli"},{
id: 8, label: "Victoria"},{
id: 9, label: "Relu"},{
id: 10, label: "Cristi"},{
id: 11, label: "Jacob"},{
id: 12, label: "Mike"},{
id: 13, label: "Minodoa"},{
id: 14, label: "Daciana"},{
id: 15, label: "Utu"},{
id: 16, label: "Kyle"}
];
$scope.example1settings = {
scrollableHeight: '300px',
scrollable: true,
enableSearch: true,
checkBoxes: true
};
$scope.gridOptions = {
enableFiltering: true,
enableFullRowSelection: true,
enableSelectAll: true,
enableGridMenu: true,
paginationPageSizes: [25,45,65],
paginationPageSize: 45,
enableSorting: true,
enableHorizontalScrollbar: 1,
columnDefs: [
{field: 'firstName', minWidth: 250, headerCellClass: 'blue',
filterHeaderTemplate:'<div class="ui-grid-filter-container"><div ng-dropdown-multiselect="" options="grid.appScope.example1data" selected-model="grid.appScope.example1model" checkboxes="true" extra-settings="grid.appScope.example1settings"></div></div>'},
{field: 'lastName', minWidth: 250, headerCellClass: 'blue'},
{field: 'company', minWidth: 250, headerCellClass: 'blue'},
{field: 'employed', minWidth: 250, headerCellClass: 'blue'},
{field: 'gender', minWidth: 250, headerCellClass: 'blue',
filter: {
term: '1',
type: uiGridConstants.filter.SELECT,
selectOptions: [ { value: '1', label: 'male' }, { value: '2', label: 'female' }]
},
cellFilter: 'mapGender'},
{field: 'country', minWidth: 250, headerCellClass: 'blue'},
{field: 'dob', minWidth: 250, headerCellClass: 'blue'},
{field: 'age', minWidth: 250, headerCellClass: 'blue'}
],
};
/*=========GRID OPTION========*/
$scope.gridOptions.multiSelect = true;
/*=========GRID OPTION=========*/
$scope.myData = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true,
"gender": "male",
"country": "USA",
"dob": "08/14/1992",
"age": "25"
},
$scope.gridOptions.data = $scope.myData;
$scope.myData.forEach( function addDates( row, index ){
row.gender = row.gender==='male' ? '1' : '2';
});
}])
myApp.filter('mapGender', function() {
var genderHash = {
1: 'male',
2: 'female'
};
return function(input) {
if (!input){
return '';
} else {
return genderHash[input];
}
};
});