Angularjs : 3 nested ng-repeat table representation - javascript

I have nested ng-repeats like below :
<table class="table table-striped table-bordered" border=1>
<tbody ng-repeat="list in globalList">
<tr ng-repeat="child in list">
<td ng-repeat="baby in child">
{{baby.second}}
</td>
</tr>
</tbody>
</table>
What I'd like to have is a table as header the baby.title property and as data baby.second
Something that looks like to this :
|baby.title | baby.title | ... | ->HEADERS
--------------------------------
|baby.second| baby.second| ... |
|baby.second| baby.second| ... |
|baby.second| baby.second| ... | ->DATAS
My data structure in picture :
I don't know if that's possible with my data structure tho and I can hardly change it.
Any advices ?


UPDATE: Check this code. I added new variable in JS $scope.longestArray
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.globalList = [
[
[{
'second': "dataAA",
'title': "titleA"
}, {
'second': "dataAB",
'title': "titleA"
}]
],
[
[{
'second': "dataBA",
'title': "titleB"
}, {
'second': "dataBB",
'title': "titleB"
}, {
'second': "dataBC",
'title': "titleB"
}]
],
[
[{
'second': "dataCA",
'title': "titleC"
}]
]
];
$scope.longestArray = angular.copy($scope.globalList).sort(function(a, b) {
return b[0].length - a[0].length;
})[0][0];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<table>
<thead>
<tr>
<th ng-repeat="list in globalList">
{{list[0][0].title}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="baby in longestArray">
<td ng-repeat="list in globalList">
{{list[0][longestArray.indexOf(baby)].second}}
</td>
</tr>
</tbody>
</table>
</body>
Plunker

Related

How to share rows between two tables on the same page

I want to do something like this:
As you can see they must be in the same html page and should transfer rows without refreshing the entire page again.
Someone can give me some help?

Here's a screen shot of the results:
Here's the important parts of the HTML:
<body ng-controller="MainCtrl">
<table border=1>
<thead>
<tr>
<th colspan="2">Table 1</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in table1">
<td><input type="checkbox" ng-model="item.checked"></td>
<td><span ng-bind="item.data"></span></td>
</tr>
</tbody>
</table>
<br>
<button ng-click="transferRight()">Transfer ></button>
<br>
<button ng-click="transferLeft()">< Transfer</button>
<br>
<br>
<table border=1>
<thead>
<tr>
<th colspan="2">Table 2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in table2">
<td><input type="checkbox" ng-model="item.checked"></td>
<td><span ng-bind="item.data"></span></td>
</tr>
</tbody>
</table>
</body>
Here's the important parts of the javascript/angularjs:
app.controller('MainCtrl', function($scope, $filter) {
$scope.table1 = [
{checked:false, data:'Data 1'},
{checked:true, data:'Data 3'},
{checked:true, data:'Data 4'},
{checked:false, data:'Data 6'},
{checked:false, data:'Data 7'}];
$scope.table2 = [
{checked:false, data:'Data 2'},
{checked:false, data:'Data 5'}];
$scope.transferRight = function() {
angular.forEach($filter('filter')($scope.table1, {checked: true}), function(value) {
value.checked = false;
$scope.table2.unshift(value);
$scope.table1.splice($scope.table1.indexOf(value), 1);
});
};
$scope.transferLeft = function() {
angular.forEach($filter('filter')($scope.table2, {checked: true}), function(value) {
value.checked = false;
$scope.table1.unshift(value);
$scope.table2.splice($scope.table2.indexOf(value), 1);
});
};
});
Here's a link to a working Plunker, http://plnkr.co/edit/qoARS4mtp5CQQnf1kogA?p=preview

You could look at this code. It's completely made with Javascript and html.
It's called a picklist btw.

just use append() or appendTo()
$(".toRight").click(function () {
$("#table1 input:checked").closest("tr").appendTo("#table2");
});
Here full code

ng-repeat not working properly

Hello guys so i was running this simple HTML,Angular code and i can not get the movies title and url display in my html....but the $scope.test is displayinmg....HELP!!
angular.module('clientApp')
.controller('MoviesCtrl', function ($scope) {
$scope.test = "tester";
$scope.movies = [
{
title:"Green Card",
url:"https://www.youtube.com/watch?v=_i8C9gO91ts"
},
{
title: "Fidelawit ፊደላዊት",
url: "https://www.youtube.com/watch?v=B4u4A7CF3N0"
},
{
title: "Heran ሔራን",
url: "https://www.youtube.com/watch?v=_TlRGhOdLJ0"
},
{
title: "Lela Mafia ሌላ ማፊያ",
url: "https://www.youtube.com/watch?v=_i8C9gO91ts"
}
];
});
<table class="table table-striped">
<thead>
<th>Title</th>
<th>URL</th>
</thead>
<tbody>
<tr ng-repeat="movie in movies">
<td>{{ movie.title }}</td>
<td>{{ movie.url }}</td>
</tr>
</tbody>
</table>

Add the AngularJS and if it is the first place where you have worked with module, you need define it with empty brackets angular.module('clientApp', [])
angular.module('clientApp', [])
.controller('MoviesCtrl', function ($scope) {
$scope.test = "tester";
$scope.movies = [
{
title:"Green Card",
url:"https://www.youtube.com/watch?v=_i8C9gO91ts"
},
{
title: "Fidelawit ፊደላዊት",
url: "https://www.youtube.com/watch?v=B4u4A7CF3N0"
},
{
title: "Heran ሔራን",
url: "https://www.youtube.com/watch?v=_TlRGhOdLJ0"
},
{
title: "Lela Mafia ሌላ ማፊያ",
url: "https://www.youtube.com/watch?v=_i8C9gO91ts"
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='clientApp' ng-controller='MoviesCtrl'>
<table class="table table-striped">
<thead>
<th>Title</th>
<th>URL</th>
</thead>
<tbody>
<tr ng-repeat="(key, movie) in movies">
<td>{{ movie.title }}</td>
<td>{{ movie.url }}</td>
</tr>
</tbody>
</table>
</div>

You probably forgot to load angular.js.
So just add this file on above of all the script files.
<script src="angular.min.js"></script>
You can download this file from here.. https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js
And update angular.module('clientApp') to angular.module('clientApp', [])
Hence the modified code will look like this...
Controller file (.js)
angular.module('clientApp', [])
.controller('MoviesCtrl', function ($scope) {
$scope.test = "tester";
$scope.movies = [
{
title:"Green Card",
url:"https://www.youtube.com/watch?v=_i8C9gO91ts"
},
{
title: "Fidelawit ፊደላዊት",
url: "https://www.youtube.com/watch?v=B4u4A7CF3N0"
},
{
title: "Heran ሔራን",
url: "https://www.youtube.com/watch?v=_TlRGhOdLJ0"
},
{
title: "Lela Mafia ሌላ ማፊያ",
url: "https://www.youtube.com/watch?v=_i8C9gO91ts"
}
];
});
Html file
<script src="angular.min.js"></script>
<div ng-app='clientApp' ng-controller='MoviesCtrl'>
<table class="table table-striped">
<thead>
<th>Title</th>
<th>URL</th>
</thead>
<tbody>
<tr ng-repeat="(key, movie) in movies">
<td>{{ movie.title }}</td>
<td>{{ movie.url }}</td>
</tr>
</tbody>
</table>
</div>

The problem does not seems too big. Only two things I have done
Added to body to initialise the angular app. B
<body ng-app='clientApp'>
Added ng-controller to table tag
<table class="table table-striped" ng-controller="MoviesCtrl">
However this is must. Must make an [] for zero dependencies.
angular.module('clientApp', [])
Here it goes
angular.module('clientApp', [])
.controller('MoviesCtrl', function ($scope) {
$scope.test = "tester";
$scope.movies = [
{
title:"Green Card",
url:"https://www.youtube.com/watch?v=_i8C9gO91ts"
},
{
title: "Fidelawit ፊደላዊት",
url: "https://www.youtube.com/watch?v=B4u4A7CF3N0"
},
{
title: "Heran ሔራን",
url: "https://www.youtube.com/watch?v=_TlRGhOdLJ0"
},
{
title: "Lela Mafia ሌላ ማፊያ",
url: "https://www.youtube.com/watch?v=_i8C9gO91ts"
}
];
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
</head>
<body ng-app='clientApp'>
<table class="table table-striped" ng-controller="MoviesCtrl">
<thead>
<th>Title</th>
<th>URL</th>
</thead>
<tbody>
<tr ng-repeat="movie in movies">
<td>{{ movie.title }}</td>
<td>{{ movie.url }}</td>
</tr>
</tbody>
</table>
</body>
</html>

Can you populate a table with Angular.js without hardcoding column names?

I have a simple Angular.js application that grabs tabular data from a mysql database and shows it in a simple bootstrap table. I’m using this code below to show the table column names without hardcoding them individually…
HTML:
<table class="table">
<thead>
<tr style="background:lightgrey">
<th ng-repeat="column in columns"> {{ column }} </th>
</tr>
</thead>
and in the controller I create ’$scope.columns’ with something like this…
var columnNames = function(dat) {
var columns = Object.keys(dat[0]).filter(function(key) {
if (dat[0].hasOwnProperty(key) && typeof key == 'string') {
return key;
}
});
return columns;
};
DataFactory.getTables(function(data) {
$scope.columns = columnNames(data);
$scope.tables = data;
});
And this works as expected and it’s great, but what about the the rest of the data.. So for example, the body of my table currently looks like this…
HTML:
<tbody>
<tr ng-repeat="x in tables ">
<td> {{ x.id}} </td>
<td> {{ x.name }} </td>
<td> {{ x.email }} </td>
<td> {{ x.company }} </td>
</tbody>
I’ve tried using two loops like this…
HTML:
<tbody>
<tr ng-repeat="x in tables">
<td ng-repeat=“column in columns”> {{ x.column }} </td>
</tr>
</tbody>
But this code doesn’t work, So is it possible to populate a table with angular without hardcoding the column names in HTML, and if so whats the most efficient way to do so?

You might want to try this https://jsfiddle.net/8w2sbs6L/.
<div data-ng-app="APP">
<table ng-controller="myController" border=1>
<thead>
<tr>
<td ng-repeat="column in columns">{{column}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in tables">
<td ng-repeat="column in columns">{{x[column]}}</td>
</tr>
</tbody>
</table>
</div>
<script>
'use strict';
angular.module('APP', [])
.controller('myController', ['$scope', function($scope){
$scope.tables = [
{
"column1":"row1-column1",
"column2":"row1-column2",
"column3":"row1-column3",
"column4":"row1-column4"
},
{
"column1":"row2-column1",
"column2":"row2-column2",
"column3":"row2-column3",
"column4":"row2-column4"
}
];
$scope.columns = [
"column1",
"column2",
"column3",
"column4"
];
}]);
</script>

add multiple rows in one column using angular ng-repeat

I want to generate table contents using json object. I am using ng-repeat to insert multiple rows in a table. But I have to generate table like the following.
--------------
ID | subjects
--------------
| S1
1 | S2
| S3
--------------
| S4
2 | S5
| S6
--------------
my angular code is:
<tr ng-repeat = "user in users">
<td>{{user.id}}</td>
<td>{{user.subject}}</td>
</tr>
my json object is :
user:[
{id:1 ,
subjects:[
{id:1 , name:"eng"}
{id:2 , name:"phy"}
]
},
{id:2 ,
subjects:[
{id:1 , name:"eng"}
{id:3 , name:"math"}
]
}
]
I want to generate html table like this
<table>
<tr>
<td >ID</td>
<td>Sub</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>S1</td>
</tr>
<tr>
<td>S2</td>
</tr>
<tr>
<td>S3</td>
</tr>
how to insert multiple rows in one column using angular

Use ng-repeat-start and ng-repeat-end. For example:
<tr ng-repeat-start="user in users">
<td rowspan="{{user.subjects.length+1}}">{{user.id}}</td>
</tr>
<tr ng-repeat-end ng-repeat="subject in user.subjects">
<td>S{{subject.id}}</td>
</tr>
Here is a full example:
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {
var users = [{
id: 1,
subjects: [{
id: 1,
name: "eng"
}, {
id: 2,
name: "phy"
}]
}, {
id: 2,
subjects: [{
id: 1,
name: "eng"
}, {
id: 3,
name: "math"
}, {
id: 4,
name: "hist"
},
{
id: 5,
name: "geog"
}]
}];
$scope.users = users;
});
table { border-collapse: collapse; }
td { border: 1px solid Black; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="MyApp" ng-controller="MyController">
<thead>
<tr>
<td>ID</td>
<td>Subjects</td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="user in users">
<td rowspan="{{user.subjects.length+1}}">{{user.id}}</td>
</tr>
<tr ng-repeat-end ng-repeat="subject in user.subjects">
<td>S{{subject.id}}</td>
</tr>
</tbody>
</table>
Also, working fiddle here: http://jsfiddle.net/donal/r51d5fw5/17/
An alternative version, using nested ng-repeat, can be implemented using a div to display the nested subject information:
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>
<div ng-repeat="subject in user.subjects">S{{subject.id}}</div>
</td>
</tr>

rowspan will do everything you need. Follow this link:
w3schools This is one of the best resources for web development.

Using div u can also do
<div ng-repeat = "user in users">
<div> {{user.id}} </div>
<div ng-repeat = "user1 in users.subjects">
{{user1.id}} : {{user1.name}}
<div>
</div>

Donal's answer is good.
But I edited to show beautiful table:
<table class="table table-bordered table-hover table-height m-b-xs">
<thead>
<tr>
<td>ID</td>
<td>Subjects</td>
<td>name</td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="user in users">
<td rowspan="{{user.subjects.length}}">key {{user.id}}</td>
<td>S{{ user.subjects[0].id }}</td>
<td>{{ user.subjects[0].name }}</td>
</tr>
<tr ng-repeat-end ng-repeat="subject in user.subjects.slice(1)">
<td>S{{subject.id}}</td>
<td>{{subject.name}}</td>
</tr>
</tbody>

Generate html table using angular

I want to generate html table using angular.I have a json object and i used ng-repeat to add multiple rows. But my table structure is different.
I want to generate table structure like this:
<table>
<tr>
<td >ID</td>
<td>Sub</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>S1</td>
</tr>
<tr>
<td>S2</td>
</tr>
<tr>
<td>S3</td>
</tr>
</table>
--------------
ID | subjects
--------------
| S1
--------
1 | S2
--------
| S3
--------------
| S4
--------
2 | S5
--------
| S6
--------------
user:[
{id:1 ,
subjects:[
{id:1 , name:"eng"}
{id:2 , name:"phy"}
]
},
{ id:2 ,
subjects:[
{id:1 , name:"eng"}
{id:3 , name:"math"}
]
}
]
my angular code is:
<tr ng-repeat = "user in users">
<td>{{user.id}}</td>
<td>{{user.subject}}</td>
</tr>
I want to know how to generate table structure like above

You need to use ng-repeat-start and ng-repeat-end. For example:
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {
var users = [{
id: 1,
subjects: [{
id: 1,
name: "eng"
}, {
id: 2,
name: "phy"
}]
}, {
id: 2,
subjects: [{
id: 1,
name: "eng"
}, {
id: 3,
name: "math"
}]
}];
$scope.users = users;
});
table { border-collapse: collapse; }
td { border: 1px solid Black; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="MyApp" ng-controller="MyController">
<thead>
<tr>
<td>ID</td>
<td>Subjects</td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="user in users">
<td rowspan="{{user.subjects.length+1}}">{{user.id}}</td>
</tr>
<tr ng-repeat-end ng-repeat="subject in user.subjects">
<td>S{{subject.id}}</td>
</tr>
</tbody>
</table>
Also, working fiddle here: http://jsfiddle.net/donal/r51d5fw5/17/

Similar to the nested structure of your object, you can nest your ng-repeats like this...
<tr ng-repeat = "user in users">
<td>{{user.id}}</td>
<td ng-repeat="subject in user.subjects">{{subject.name}}</td>
</tr>

I split your JSON and push it into two $scope variable, like the below:
angular.forEach($scope.user, function(user) {
$scope.userDetails.push({
userId: user.id,
});
angular.forEach(user.subjects, function(subject) {
$scope.subjectDetails.push({
userId: user.id,
subjectName: subject.name
});
});
});
In the HTML, I am using filter to filter by user's id.
<table>
<thead>
<tr>
<th style="width: 50px">ID</th>
<th style="width: 75px">Subjects</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in userDetails">
<td><span ng-bind="user.userId"></span>
</td>
<td>
<table>
<tr ng-repeat="sub in subjectDetails | filter: {userId: user.userId}">
<td>
<div ng-bind="sub.subjectName"></div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
This is also one of the way to achieve this.
Sample Plunker

Here, I'm assuming that you want each user in users (in your JSON object) in one table, so you can do something as follows:
<table ng-repeat="user in users">
<tr>
<td>{{user.id}}</td>
<td>Subjects</td>
</tr>
<tr ng-repeat="subject in user.subjects">
<td>{{subject.id}}</td>
<td>{{subject.name}}</td>
</tr>
</table>
Adjust the html accordingly based on your needs, but this is the basic idea :)
Hope this helps!

add users object in $scope.
$scope.users=[
{id:1 ,
subjects:[
{id:1 , name:"eng"}
{id:2 , name:"phy"}
]
},
{ id:2 ,
subjects:[
{id:1 , name:"eng"}
{id:3 , name:"math"}
]
}
]
Here is the html.
<table border="1">
<tr>
<th> ID </th>
<th> subjects </th>
</tr>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td><table>
<tr ng-repeat="subject in user.subjects">
<td>{{subject.name}}</td>
</tr>
</table></td>
</tr>
</table>
Here is the plunker

Categories

Resources