I have the following ngTable, and I want to add columns dynamically:
<table ng-table="tableParams" show-filter="showFilter" class="table table-bordered">
<tbody>
<tr ng-repeat="d in $data" >
<td ng-repeat="col in cols" title="'col.nm'"
filter="{ col.nm: 'text' }">{{ col.nm }}</td>
</tr>
</tbody>
</table>
$data contains the data itself, but I have the columns definition in a different array:
$scope.cols = [ {nm:'col0'}, {nm:'col1'}, {nm:'col2'} ];
and $data:
$scope.data = [ {col0: "0", col1: "1", col2: "2"} ] ...
When I run the code the table is empty without any columns. I tried to look online to see if this is possible but couldn't find an example. Any ideas?
Added PLUNK
Problem is with your ng-repeat. You are using Wrong variable syntax
Change this
<tr ng-repeat="d in $data" >
to
<tr ng-repeat="d in data" >
Lel... i check PLUNK and i see you no declare cols in SCOPE! and how u want take it from html?! xD check change this:
var app = angular.module('app', ['ngTable']);
app.controller('myCtl', function($scope,NgTableParams) {
$scope.cols = [ {nm:'col0'}, {nm:'col1'}, {nm:'col2'} ];
$scope.data = [
{ col0: 'User 1', col1: 'Name 1', col2: 'Group 1'},
{ col0: 'User 2', col1: 'Name 2', col2: 'Group 2'}
];
$scope.tableParams = new NgTableParams({dataset: $scope.data});
});
And voila
EDIT V2:
Check this html, i added columns name with one ng-repeat and value in another.
<table ng-table="tableParams" class="table table-bordered table-hover">
<tbody>
<td ng-repeat="col in cols">{{ col.nm }}</td>
<tr ng-repeat="u in data">
<td ng-repeat="(key, value) in u">
{{value}}
</td>
</tr>
</tbody>
</table>
Hope this help
Cols:
$scope.cols = [ {nm:'col0'}, {nm:'col1'}, {nm:'col2'} ];
Data:
$scope.data = [ {col0: "0", col1: "1", col2: "2"} ] ...
Template:
<div ng-controller="myCtl" ng-app="app">
<table ng-table="tableParams" class="table table-bordered table-hover">
<tbody>
<tr><td ng-repeat="name in names">{{ name.nm }}</td></tr>
<tr ng-repeat="u in data">
<td ng-repeat="value in u">
{{value}}
</td>
</tr>
</tbody>
</table>
</div>
Try this.
Related
In this plunk I have an ngTable with pagination of 3 rows per page set with {count: 3} in NgTableParams. Instead, the table is displaying 4 rows per page. How to fix this?
HTML:
<table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover">
<thead>
<tr>
<th ng-repeat="col in cols" ng-style="{ 'color': col.color }">{{col.title}}</th>
</tr>
</thead>
<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'}
];
$scope.data = [
{ uid: 'aaa',ugr: '222'},
{ uid: 'bbb', ugr: '111'},
{ uid: 'ccc',ugr: '222'},
{ uid: 'ddd', ugr: '111'}
];
$scope.tableParams = new NgTableParams({count: 3},
{dataset: $scope.data, counts: []});
});
you should change your code like this:
<tr ng-repeat="row in $data">
<td ng-repeat="col in cols" ng-style="{ 'color': col.color }" >{{row[col.nm]}}</td>
</tr>
$scope.tableParams = new NgTableParams({count: 3}, {data: $scope.data, counts: []});
The reason is:
1、about '$data', please see What is '$data' in ngtable's HTML page
2、about 'data' replace 'dataset', please see Angular ng-table not loading dataset?
On click of a button I get the following Response from Node JS .
[{
"_id": "590998cca8ac14d0c075282c",
"CompID": "0001388D",
"CompName": "ONE"
},
{
"_id": "590998cca8ac14d0c075282qc",
"CompID": "0001388D2",
"CompName": "TWO"
},
{
"_id": "590998cca8ac14d0c07528qq2c",
"CompID": "0001388D23",
"CompName": "Three"
}
]
I am printing this information using Angular JS table ng - repeat
This is my code
My question is , is it possible to skip _id field while printing ??
This is my code
<div ng-app="myapp" ng-controller="FirstCtrl">
<table border="1">
<tr>
<th ng-repeat="(key, val) in collectioninfo[0]">{{ key }}</th>
</tr>
<tr ng-repeat="row in collectioninfo">
<td ng-repeat="column in row">
{{ column }}
</td>
</tr>
</table>
</div>
JSFiddle
you can try with ng-if to avoid showing some elments in ng-repeat.
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope) {
$scope.collectioninfo = [{
"_id": "590998cca8ac14d0c075282c",
"CompID": "0001388D",
"CompName": "ONE"
},
{
"_id": "590998cca8ac14d0c075282qc",
"CompID": "0001388D2",
"CompName": "TWO"
},
{
"_id": "590998cca8ac14d0c07528qq2c",
"CompID": "0001388D23",
"CompName": "Three"
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myapp" ng-controller="FirstCtrl">
<table border="1">
<tr>
<th ng-repeat="(key, val) in collectioninfo[0]" ng-if="key !== '_id'">{{ key }}</th>
</tr>
<tr ng-repeat="row in collectioninfo">
<td ng-repeat="(key2, val2) in row" ng-if="key2 !== '_id'">
{{ val2 }}
</td>
</tr>
</table>
</div>
Check the jsfiddle here
<table border="1">
<tr>
<th ng-repeat="(key, val) in collectioninfo[0]" ng-show="key != '_id'">{{ key }}</th>
</tr>
<tr ng-repeat="row in collectioninfo">
<td ng-repeat="column in row" ng-hide="column === row._id">
{{ column }}
</td>
</tr>
</table>
I have added a check for the key '_id'.
after you get the response in your angular controller do this :
$scope.datas = [];
//lines of code
.then(function success(response) {
$scope.collectionInfo=response.data.collectionInfo;
for(var i=0;i<$scope.collectionInfo.length;i++){
$scope.index=i;
$scope.datas.push($scope.collectionInfo[i]);
}
//lines of code
});
And on the html page do this :
<div id="DisplayCollection">
<table ng-repeat="x in collectionInfo">
<tr>
<th>
CompID
</th>
<th>
CompName
</th>
</tr>
<tr ng-repeat="y in x track by $index">
<td>{{y.compID[$index]}}</td>
<td>{{y.compName[$index]}}</td>
</tr>
</table>
Given that you have sent the data in form of an array: collectionInfo
Given this data:
this.stuff = [
[{title: 'col1', rowspan: 1},{title: 'col2', rowspan: 2}],
[{title: 'col3', rowspan: 1}]
];
How does one generate the following with ng-repeat:
<table border="1">
<tr>
<td rowspan="1">col1</td>
<td rowspan="2">col2</td>
</tr>
<tr>
<td rowspan="1">col3</td>
</tr>
</table>
You could use the following:
<table border="1">
<tr ng-repeat="item in stuff">
<td ng-repeat="obj in item" rowspan="{{ obj.rowspan }}">{{ obj.title }}</td>
</tr>
</table>
I'm trying to make an editable table directive. I have two configs:
1) Table config:
table = [
{name: 'id',title: '#'},
{name: 'name',title: 'Name'},
{name: 'phone',title: 'Phone'},
{
name: 'action',
title: 'Edit',
button_name: 'Edit me',
type: 'button',
}
];
2) Data config:
data = [
{id: 1, name: 'Rikki', phone: 02},
{id: 2, name: 'Pikki', phone: 03},
{id: 3, name: 'Mikki', phone: 03}
];
I'm wondering, how to put buttons in the cell when it's 'action' row:
3) HTML:
<thead>
<tr>
<h2>head</h2>
<td ng-repeat="(key, value) in table">{{value.title}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(tkey, dataValue) in data">
<td ng-repeat="(dkey, value) in dataValue">
{{value}} // and if it's 'Action' column, I want to push data from Table config to show buttons
Is it possible? Who can help me?
<thead>
<tr>
<th ng-repeat="column in table">{{ column.title }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data">
<td ng-repeat="column in table">
<span ng-if="column.name !== 'action'">
{{ row[column.name] }}
</span>
<span ng-if="column.name === 'action'">
<button>{{ column.button_name }}</button>
</span>
</td>
</tr>
</tbody>
I have a table
<table>
<thead>
<tr class="">
<th class="" ng-repeat="span in realm.spans">{{span.description}}</th>
</tr>
</thead>
<tbody>
<tr class="content-row" ng-repeat="row in realm.rows" ng-class="rowClass(row)" ng-click="markRow($event,row)">
<td class="content-field" ng-repeat="(i,field) in row.fields track by $index>
<input class="content-input" type="text" ng-model="row.fields[i]">
</td>
</tr>
</tbody>
</table>
How can i enforce the order used on thead, to be also used with the td elements in the table's body?
I have tried this:
<td ng-repeat="(i,field) in row.fields track by $index | orderBy: realm.spans>
<input type="text" ng-model="row.fields[i]">
</td>
But that made no change
Take a look at this sample demo
Working Demo
html
<div ng-app='myApp' ng-controller="ArrayController">
<table border="1">
<th ng-repeat="header in headers"> <b>{{ headers[$index]}}</b></th>
<tr ng-repeat="arr in records">
<td ng-repeat="val in arr" ng-bind-html-unsafe="arr[headers[$index]]">
</td>
</tr>
</table>
</div>
script
var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
$scope.headers = ['col1', 'col2'];
$scope.records = [{
col1: 'a1',
col2: 'd1'
}, {
col1: 'c2',
col2: 'A2'
}, {
col1: 'b3',
col2: 'c3'
}, {
col1: 'd4',
col2: 'a1'
}, {
col1: '11',
col2: '22'
}, {
col1: 'E1',
col2: 'E2'
}];
});