Search Posts

Category: ngtable

Use directive to show/hide ngTable columns and headers

I’m trying to use a permission-based system in angular 1 to show/hide columns and their headers. The directive below works in terms of displaying the correct columns, however the headers all render, leaving a number of blank columns. View <div id=”scrollable-area”> <table ng-table=”vm.tableParams” class=”table” fixed-table-headers=”scrollable-area”> <tr ng-repeat=”row in $data” ng-class=”{‘selected’:row.rowId == rowId}” ng-click=”setClickedRow(row.rowId)”> <td permission=”[‘all_firms’, ‘firm_info’]” width=”40″ header=”‘headerCheckbox.html'”><input type=”checkbox” ng-model=”row.selected” /></td> <td permission=”[‘all_firms’, ‘firm_info’]” width=”10″ ng-if=”callType”><i class=”fa fa-microphone”ng-show=”row.audioInterface == ‘1’”></i></td> <td permission=”[‘all_firms’, ‘firm_info’]” data-title=”‘Username'” filter=”{ […]

ng table grouping : change header background color

I am using ng table with group mode, how can I modify the background color of the header? I can’t see the text on the left before up and down chevrons because of the blue background color. Here is my code : <table ng-table=”vm.tableParams” show-filter=”true” class=”table table-bordered table-hover” id=”dynamic-table”> <tr class=”ng-table-group” ng-repeat-start=”group in $groups”> <td colspan=”5″ data-title=”‘TEST1′”> <a href=”” ng-click=”group.$hideRows = !group.$hideRows” > <span class=”glyphicon” ng-class=”{ ‘glyphicon-chevron-right’: group.$hideRows, ‘glyphicon-chevron-down’: !group.$hideRows }”></span> <span>{{ group.value }}</span> </a> […]

How to change ngTable title colors programmatically?

In this plunk I have an ngTable that is created dynamically, setting progammatically the colors of the rows for each column. How to change the colors of the column titles? HTML: <table ng-table-dynamic=”tableParams with cols” class=”table table-bordered table-hover”> <tr ng-repeat=”row in data”> <td ng-repeat=”col in cols” ng-style=”{ ‘color’: col.color }”>{{row[col.nm]}}</td> </tr> </table> Javascript: var app = angular.module(‘app’, [‘ngTable’]); app.controller(‘myCtl’, function($scope,NgTableParams) { $scope.cols = [ {nm:’uid’, title:’User ID’, color: ‘blue’}, {nm:’ugr’, title: ‘Group ID’, color: ‘red’} […]

Angular ngtable not displaying data correctly

I have an ngTable that is loaded with data that proceeds from a “Get” call to a webapi. Then I reload the table, but the data it is not being displayed. This is the *.js file rdapp.controller(‘scoringTableCtrl’, [ ‘$location’,’$scope’, ‘$http’, ‘ngTableParams’,’$filter’, function($location, $scope, $http, ngTableParams, $filter ){ $scope.teamList = []; $http({ method: ‘GET’, url: ‘http://localhost:34592/api/scoringTable’, headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded; charset=UTF-8’ } }).then(function (success) { $scope.teamList =; addFieldsForSorting(); $scope.dataTable.reload(); }, function (error) { console.log(error); }); […]