javascript - Multi-select Drop-down filter AngularJS Logic -
thanks taking time read question. working on angularjs ui-grid, i've implemented multi-select drop-down menu "first name" column. however, having issues understanding how implement logic did "male" & "female" column since multi-select. if please me on logic example have created first column "first name". @ least guidance appreciated. thank in advance! also, may notice grid broken, header row stuck , not scrolling horizontally. has been fixed!
here plunker! https://plnkr.co/edit/caizoibpyzgdpfwspabk?p=preview
here of angular & html code! know code not dry, refactoring 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]; } }; });
do mean want filter rows check multiple 'fisrt name' options?
one thing can think of can filter yourself. filter grid data every time checked/unchecked checkbox option, after filtering, re-assign data $scope.mydata
Comments
Post a Comment