Multi-select Drop-down filter AngularJS Logic
Question
Thanks for taking the time to read my question. I am currently working on an AngularJS UI-Grid, I've implemented a Multi-select Drop-down Menu for the "First Name" column. However, I am having some issues understanding how to implement the logic like I did for the "Male" & "Female" column since this is multi-select. If someone could please help me on the logic with the example I have already created for the first column "First Name". At least some guidance would be appreciated. Thank you in advance! Also, you may notice the grid is broken, the Header row is stuck and not scrolling horizontally. This has been fixed!
Here is the Plunker! https://plnkr.co/edit/cAiZOIBpYZgDpfwspABK?p=preview
Here is some of my Angular & HTML code! I know my code is not very DRY, I will be refactoring my code shortly.
<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>
//ANGULAR CODE BELOW
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];
}
};
});
2 answers
solution1
0 2017-07-27 08:09:14
Do you mean you want to filter rows by check multiple 'Fisrt name' options?
One thing i can think of is you can do the filter by yourself. You filter grid data every time you checked/unchecked an checkbox option, after filtering, you re-assign the data back to $scope.myData
solution2
0 2017-07-27 10:22:14
I believe this below link will be very much helpful for you and does your code optimizations as well :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
AngularJS set values of multi-select drop-down using selectize and ng-repeat
Auto-select in Materialize Multi-Select drop-down
Changing style and position of created multi-select drop-down checkbox
Get selected values in a multi-select drop-down and insert them in a JSON
Not able to disable a multi-select drop down
angularjs custom filter in drop-down list
Angularjs drop-down select dynamically
Set the selected value of a multi-select drop down in MVC
angularjs filter drop-down list according to selected values in other drop-down lists
AngularJS select drop-down not RED per required
Related Tags