Created
September 12, 2014 03:16
-
-
Save srph/9921c6ea8d59d82a1efd to your computer and use it in GitHub Desktop.
smart-table hide/show-columns
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function AffiliationCtrl ($scope, AffiliationSrvc) { | |
| var hiddenColumns = []; | |
| var positionOf = function (column) { | |
| return hiddenColumns.indexOf(column); | |
| }; | |
| /** | |
| * Checks if a column is hidden | |
| * @param {[type]} column [description] | |
| * @return {Boolean} [description] | |
| */ | |
| var isHidden = function (column) { | |
| if( ! angular.equals(positionOf(column), -1) ) { | |
| return true; | |
| } | |
| return false; | |
| }; | |
| var hide = function (column) { | |
| if ( !isHidden(column) ) { | |
| hiddenColumns.push(column); | |
| } | |
| }; | |
| var show = function (column) { | |
| // if ( isHidden(column) ) { | |
| hiddenColumns.splice(positionOf(column), 1); | |
| // } | |
| $scope.selectedColumn = ''; | |
| console.log(positionOf(column)); | |
| }; | |
| $scope.affiliations = AffiliationSrvc.data; | |
| $scope.hiddenColumns = hiddenColumns; | |
| $scope.isHidden = isHidden; | |
| $scope.hide = hide; | |
| $scope.show = show; | |
| } | |
| angular.module('app').controller('AffiliationCtrl', AffiliationCtrl); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h3> Affiliation </h3> | |
| <div class="row"> | |
| <div class="col-md-3 col-md-off-set-4"> | |
| <select class="form-control" ng-change="show(selectedColumn)" ng-model="selectedColumn" ng-options="column for column in hiddenColumns"> | |
| <option value="" disabled> Select a hidden column to show </option> | |
| </select> | |
| </div> | |
| <div class="dropdown col-md-4"> | |
| <button type="button" class="btn btn-default" data-toggle="dropdown" ng-hide="isHidden('name') && isHidden('founder') && isHidden('dateFounded')"> | |
| Bulk Actions | |
| <i class="ion-arrow-down-b"></i> | |
| </button> | |
| <ul class="dropdown-menu" role="menu" aria-labelledby="bulk-actions"> | |
| <li role="presentation"> | |
| <a href="" ng-click=""> | |
| <i class="ion-trash-a"></i> | |
| Delete | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <table st-table="affiliations" class="table table-striped"> | |
| <thead> | |
| <tr> | |
| <th ng-hide="isHidden('name') && isHidden('founder') && isHidden('dateFounded')"> Actions </th> | |
| <th ng-hide="isHidden('name')"> <i class="ion-ios7-minus-outline" ng-click="hide('name')"></i> <span st-sort="name"> Name </span> </th> | |
| <th ng-hide="isHidden('founder')"> <i class="ion-ios7-minus-outline" ng-click="hide('founder')"></i> <span st-sort="founder"> Founder </th> | |
| <th ng-hide="isHidden('dateFounded')"> <i class="ion-ios7-minus-outline" ng-click="hide('dateFounded')"></i> <span st-sort="dateFounded"> Date Founded </th> | |
| </tr> | |
| <tr> | |
| <th ng-hide="isHidden('name') && isHidden('founder') && isHidden('dateFounded')" colspan="1"></th> | |
| <th ng-hide="isHidden('name')"> <input type="text" class="form-control" st-search="'name'"></th> | |
| <th ng-hide="isHidden('founder')"> <input type="text" class="form-control" st-search="'founder'"></th> | |
| <th ng-hide="isHidden('dateFounded')"> <input type="text" class="form-control" st-search="'dateFounded'"></th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr st-select-row="affiliation" st-select-mode="multiple" ng-repeat="affiliation in affiliations track by $index"> | |
| <td ng-hide="isHidden('name') && isHidden('founder') && isHidden('dateFounded')"> | |
| <a ui-sref="main.affiliation.edit({ id: affiliation.id })"> <i class="ion-compose"></i> </a> | |
| </td> | |
| <td ng-hide="isHidden('name')" ng-bind="affiliation.name"> Name </td> | |
| <td ng-hide="isHidden('founder')" ng-bind="affiliation.founder"> Founder </td> | |
| <td ng-hide="isHidden('dateFounded')" ng-bind="affiliation.dateFounded | date: 'MMMM d, yyyy'"> Date Founded </td> | |
| </tr> | |
| </tbody> | |
| </table> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment