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
Related
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]}
];
I have an specific requirement where the json data comes like this:
[{Id : "a", Name : "John", age : 50},
{Id : "b", Name : "Bob", age : 40}]
I want to show it in a table using ng-repeat, but in a way where headers come in the first column, as below:
<table>
<tr>
<td>Id</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Name</td>
<td>John</td>
<td>Bob</td>
</tr>
<tr>
<td>Age</td>
<td>50</td>
<td>40</td>
</tr>
</table>
Is there a way to achieve this using angularjs?
Thanks
Provided you have a controller:
angular.module('MyApp', [])
.controller('MyController', function($scope) {
$scope.data = [
{Id : "a", Name : "John", age : 50},
{Id : "b", Name : "Bob", age : 40}
];
});
Your markup would then be as follows. If the data isn't going to change after it is displayed:
<table>
<tr>
<td>Id</td>
<td ng-repeat="item in ::data">{{::item.Id}}</td>
</tr>
<tr>
<td>Name</td>
<td ng-repeat="item in ::data">{{::item.Name}}</td>
</tr>
<tr>
<td>Age</td>
<td ng-repeat="item in ::data">{{::item.age}}</td>
</tr>
</table>
If the data is going to change after it is displayed, and you want the view to update accordingly, then:
<table>
<tr>
<td>Id</td>
<td ng-repeat="item in data track by $index">{{item.Id}}</td>
</tr>
<tr>
<td>Name</td>
<td ng-repeat="item in data track by $index">{{item.Name}}</td>
</tr>
<tr>
<td>Age</td>
<td ng-repeat="item in data track by $index">{{item.age}}</td>
</tr>
</table>
You can convert your array in an object, then you can use nested ng-repeats in view, as below:
(function() {
"use strict";
angular.module('app', [])
.controller('mainCtrl', function($scope) {
var array = [
{
"Id":"a",
"Name":"John",
"age":50
},
{
"Id":"b",
"Name":"Bob",
"age":40
}
];
// If you're sure that the properties are always these:
$scope.mainObj = {
"Id": [],
"Name": [],
"age": []
};
// If you're unsure what are the properties:
/*
$scope.mainObj = {};
Object.keys(array[0]).forEach(function(value) {
$scope.mainObj[value] = [];
});
*/
// Iterates over its properties and fills the arrays
Object.keys($scope.mainObj).forEach(function(key) {
array.map(function(value) {
$scope.mainObj[key].push(value[key]);
})
});
});
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<table>
<tr ng-repeat="(key, values) in mainObj track by $index">
<td ng-bind="key"></td>
<td ng-repeat="value in values track by $index" ng-bind="value"></td>
</tr>
</table>
</body>
</html>
I hope it helps!
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.
I have a table of data each with a checkbox. Any row that is checked moves into a second table for processing (processing not shown). I want the second table hidden unless it has rows but can't seem to figure out the ng-show. (Updated to show the need to hide the second table)
Here's the updated jsfiddle example.
Here's my html (I have the line that doesn't work commented out):
<span>Table One</span>
<div ng-controller="checkBoxCtrl">
<table width="400" border="1">
<tr>
<th>✔</th>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="data in tableOne" id="item{{data.key}}">
<td width="20px">
<input type="checkbox" ng-model="data.checked">
</td>
<td>{{data.key}}</td>
<td>{{data.value}}</td>
</tr>
</table>
<br>
<!--<div ng-show="tableOne.key.checked == true"> -->
<div>
<span>Table Two</span>
<table width="400" border="1">
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="data in tableOne | filter: {checked:true}">
<td>{{data.key}}</td>
<td>{{data.value}}</td>
</tr>
<tr>
<td colspan="2">
<button>New Group</button>
</td>
</tr>
</table>
</div>
and here's the javascript:
var app = angular.module('myApp', []);
function checkBoxCtrl($scope){
$scope.tableOne=[
{key: '1', value: 'a'},
{key: '2', value: 'b'},
{key: '3', value: 'c'},
{key: '4', value: 'd'}
];
};
Simply add a function isAtLeastOneDataChecked() in your controller, which returns true if at least one data is checked, and false otherwise, and use it in your template:
<table width="400" border="1" ng-show="isAtLeastOneDataChecked()">
$scope.isAtLeastOneDataChecked = function() {
return $scope.tableOne.some(function(data) {
return data.checked;
});
};
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'
}];
});