I have the following object. How can I only display the rows with the nested values?
$scope.mainObj = [{
name: 'a', items : [1,2,3],
name: 'b', items : [4,5,6],
}]
<table>
<tr ng-repeat="obj in mainObj">
<td></td>
</tr>
</table>
I want my output to be:
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
You could repeat tbody of table which is valid HTML. Assuming items can have entities.
HTML
<table>
<tbody ng-repeat="obj in mainObj">
<tr ng-repeat="item in obj.items">
<td>{{item }}</td>
</tr>
</tbody>
</table>
Update
Correct your object structure as well as #csschapker suggested in comment.
$scope.mainObj = [{name: 'a', items:[1, 2, 3]}, {name: 'b', items: [4, 5, 6]}]
Use code like this:
<table>
<tr ng-repeat="obj in mainObj">
<td ng-repeat="item in obj.items track by $index">
{{item}}
</td>
</tr>
</table>
And edit you source object to :
$scope.mainObj = [
{name: 'a', items: [1, 2, 3]},
{name: 'b', items: [4, 5, 6]}
];
Related
I am new to AngularJS and i trouble to nested loop in tr.
Here is my Array :
Array
(
[1] => Array
(
[0] => Array
(
[detail-1] => 1
[detail-2] => 2
)
[1] => Array
(
[detail-3] => 3
[detail-4] => 4
)
)
[2] => Array
(
.....
)
)
Wanted output in AngularJS.
<tr>
<td>1</td>
</tr>
<tr>
<td>detail-1</td>
<td>detail-2</td>
</tr>
<tr>
<td>detail-3</td>
<td>detail-4</td>
</tr>
...........
So, how to fix this logically ?
Thanks in advance.
You could use a special repeat start and end markers, ng-repeat-start and ng-repeat-end to define range of DOM elements for topmost elements in the array:
angular
.module('demo', [])
.controller('DemoCtrl', function($scope) {
$scope.nestedArray = [
['foo', 'bar'],
['baz']
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DemoCtrl">
<table>
<tbody>
<tr ng-repeat-start="item in nestedArray">
<td>
{{$index}}
</td>
</tr>
<tr ng-repeat-end>
<td ng-repeat="subitem in item">
{{subitem}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
Source
I have created JSON object like your array.
$scope.myArray = [
{
name: 'Array 1',
myArray: [
{name: '1'},
{name: '2'}
]
}, {
name: 'Array 2',
myArray: [
{name: '3'},
{name: '4'}
]
}
];
In Your HTML Code create table like below
<table class="table table-bordered">
<tr ng-repeat="row in myArray">
<td ng-repeat="childrow in row.myArray">
<span data-ng-bind="childrow.name"></span>
</td>
</tr>
</table>
Output looks like below
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.
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 return an array of people from the database eg,
[
{
id: 1,
name: 'Jim',
address: "123 Test Street",
phone: "999999999"
},
{
id: 2,
name: 'Tom',
address: "123 Test Street",
phone: "888888888"
},
{
id: 3,
name: 'Harry',
address: "123 Test Street",
phone: "012345678"
}
]
my API allows me to select a partial person by setting the fields parameter
eg for this example,
&fields=id,name,address,phone
full url for this example,
?q=&fields=id,name,address,phone&id=1,2,3
I want to be able to dynamically generate a table based on the fields selected.
Something like this,
<table>
<thead>
<tr>
<th ng-repeat="field in fields">[[ field.text ]]</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in people">
<td ng-repeat="field in fields">[[ person.[[ field.id ]] ]]</td>
</tr>
</tbody>
</table>
How can I interpolate the field.id so i can use to it select the key in person.
Edit, I have changed the interpolation characters to [[ & ]].
This line
<td ng-repeat="field in fields">[[ person.[[ field.id ]] ]]</td>
should be
<td ng-repeat="field in fields">[[ person[field.id] ]]</td>
If working with newer versions of Angular, using curly brackets with the nested interpolation in square brackets will do the trick.
<table id="dynamicTable" class="table table-hover" cellspacing="0">
<thead>
<tr>
<th *ngFor="let col of Columns">{{col.column_name}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of Table">
<td *ngFor="let col of Columns">{{row[[col.column_name]]}}</td>
</tr>
</tbody>
</table>