I have a list of dictionaries, and I want to toggle show all the students and their details for each classroom.
This is the HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<div class="classrooms-details" ng-show="Students">
<table class="table table-striped">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Gender</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="classroom in classrooms">
<td>{{classroom.student.first_name}}</a></td>
<td>{{classroom.student.last_name}}</td>
<td>{{classroom.student.gender}}</td>
<td>{{classroom.student.birthday}}</td>
</tr>
</tbody>
</table>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Classroom</th>
<th>School</th>
<th>Academic year</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="classroom in classrooms">
<td>{{classroom.classroom}}</td>
<td>{{classroom.school.school_name}}</td>
<td>{{classroom.academic_year}}</td>
</tr>
</tbody>
</table>
</div>
I've tried to use ng-click/ng-show, but it's not working.
And this is the script:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.classrooms = [{
"school": {
"id": 1,
"school_name": "IPSIA F. Lampertico",
"address": "Viale Giangiorgio Trissino, 30",
"city": "Vicenza"
},
"academic_year": "2015/2016",
"classroom": "1^A",
"floor": 0,
"students": [{
"classroom": 1,
"first_name": "Stefano",
"last_name": "Rossi",
"gender": "M",
"birthday": "1998-06-22"
}, {
"classroom": 1,
"first_name": "Luca",
"last_name": "Possanzini",
"gender": "M",
"birthday": "1999-11-22"
}]
}, {
"school": {
"id": 2,
"school_name": "ITIS A. Rossi",
"address": "Via Legione Gallieno, 52",
"city": "Vicenza"
},
"academic_year": "2015/2016",
"classroom": "2^B",
"floor": 0,
"students": [{
"classroom": 2,
"first_name": "Sergio",
"last_name": "Lazzari",
"gender": "M",
"birthday": "2001-01-29"
}]
}];
console.log($scope.classrooms);
});
I don't know how to access "students" values, and I'd like the students details to be shown only when clicking on the classroom name.
How could I accomplish this?
You just need to set a specific classroom as the "active" classroom and display the students within. The easiest way to do this would be something like:
View
<tr ng-if="activeClassroom" ng-repeat="student in activeClassroom.students">
<td>{{student.first_name}}</a></td>
<td>{{student.last_name}}</td>
<td>{{student.gender}}</td>
<td>{{student.birthday}}</td>
</tr>
...
<tr ng-repeat="classroom in classrooms">
<td>{{classroom.classroom}}</td>
<td>{{classroom.school.school_name}}</td>
<td>{{classroom.academic_year}}</td>
</tr>
Controller
$scope.activeClassroom = null;
$scope.setActiveClassroom = function (classroom) {
$scope.activeClassroom = classroom;
};
Related
im trying to to fill a table with data to export it in pdf using jsreport
but i couldnt manage to do it .
This is the html file :
<h1>test{{test}}</h1>
<table class='table striped'>
<thead>
<tr>
<th>OrderID</th>
<th>ShipAddress</th>
<th>ShipCity</th>
<th>ShipCountry</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{items.order}}</td>
<td>{{items.addr}}</td>
<td>{{items.city}}</td>
<td>{{items.country}}</td>
</tr>
</tbody>
</table>
And this is the data :
{
"items": [
{
"order": "65854",
"addr": "test 1",
"city": "2fc2",
"country": "2fc2"
},
{
"order": "75757",
"addr": "azerty",
"city": "2fc2",
"country": "2fc2"
},
{
"order": "65575784",
"addr": "tst",
"city": "2fc2",
"country": "2fc2"
}
]
}
I've tried a lot of things but i couldnt manage to do it.
you must use
<h1>test{{test}}</h1>
<table class='table striped'>
<thead>
<tr>
<th>OrderID</th>
<th>ShipAddress</th>
<th>ShipCity</th>
<th>ShipCountry</th>
</tr>
</thead>
<tbody>
{{#each items}}
<tr>
<td>{{order}}</td>
<td>{{addr}}</td>
<td>{{city}}</td>
<td>{{country}}</td>
</tr>
{{/each}}
</tbody>
</table>
https://jsreport.net/learn/handlebars
I am coding an app which makes orders and for each order their are a certain amount of products within them. How would i code my VueJs code below to display all products for each order that comes in? The code below is my VueJS template
<div class="card card-default" v-for="(order, index) in orders">
<p style="padding:0px;"><strong> User: </strong> {{order.user.name}} </p>
<table class="table-repsonsive table-bordered ">
<thead>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
</thead>
<tbody v-for="(product, pindex) in orders">
--how to loop through each product of each order in the array?
<td>{{product.order[pindex].name}}</td>
<td>R{{product.order[pindex].price}}</td>
<td>{{product.order[pindex].quant}}</td>
</tbody>
</table>
</div>
This is the order object that is pushed within the orders array after each order takes place
{
"order": [
{
"id": 1,
"name": "Garden",
"price": 20,
"quant": 1
},
{
"id": 2,
"name": "Greek",
"price": 24,
"quant": 1
},
{
"id": 3,
"name": "Chicken mayo",
"price": 24,
"quant": 1
}
],
"user": {
"id": 1,
"role_id": 2,
"name": "Mapia",
"email": "mapia#gmail.com",
"avatar": "users/default.png",
"settings": null,
"created_at": "2018-07-05 13:10:26",
"updated_at": "2018-07-05 13:10:26"
}
}
You should take you order and loop through its property order
<tbody v-for="product in order.order">
<td>{{product.name}}</td>
<td>R{{product.price}}</td>
<td>{{product.quant}}</td>
</tbody>
I am new to AngularJs and have come across an issue with Json data with nested arrays.
I have simplified the code to a simple html doc, this can be found below.
The first property {{HelloMessage}} is working and gets populated with the string value stored in the property HelloMessage, but the ng-repeat is not.
After looking online, I discovered that I in fact had an array within an array, so assumed that I needed to have an ng-repeat within an ng-repeat, but it is not working. I am quite sure that it is something simple that I have done wrong.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
</head>
<body>
<h1 ng-controller="myController">{{helloMessage}}</h1>
<div>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stream in Data.Records">
<tr ng-repeat="record in stream.Users">
<td>{{stream.Id}}</td>
<td>{{stream.User}}</td>
<td>
{{stream.Description}}
</td>
<!--<td>
<table>
<tbody>
<tr ng-repeat="b in value">
<td>{{b.user}}</td>
</tr>
</tbody>
</table>
</td>-->
</tr>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript">
angular.module('app', []).controller('myController',
function ($scope) {
$scope.helloMessage = "Hi";
$scope.Data = [{
Success: true,
ErrorMessage: null,
SuccessMessage: null,
Records: [{
"CreatedBy": "Mickey Mouse",
"CreatedDate": "2015-08-17T13:16:22.713",
"CreatedDateDisplay": "17-08-2015",
"Description": "Test 1",
"Id": 7546798576985769857,
"Name": "Test 1",
"UpdatedBy": "",
"UpdatedDate": null,
"UpdatedDateDisplay": null,
"User": null,
"UserId": 0,
"Users": [{
"Users": [{
"Id": 7546798576985769858,
"UserId": 7546798576985769857,
"DisplayName": "Daffy Duck"
}, {
"Id": 7546798576985769859,
"UserId": 7546798576985769857,
"DisplayName": "Pluto"
}
],
"User": "Bugs Bunny",
"UserId": 7546798576985769857,
"Name": "Test 2",
"Description": "Test 2",
"Id": 7546798576985769857,
"CreatedBy": "Goofy",
"CreatedDate": "2015-08-25T14:03:28.083",
"UpdatedBy": "Porky Pig",
"UpdatedDate": "2017-03-27T08:19:36.077",
"CreatedDateDisplay": "25-08-2015",
"UpdatedDateDisplay": "27-03-2017"
}
]
}
]
}
];
});
</script>
</body>
</html>
No errors are throw in Chrome Console
Rewrite the ng-repeat as
<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
</tr>
Use
<td>{{stream.Id}}</td>
<td>{{stream.UserId}}</td>
<td>{{stream.DisplayName}}</td>
instead of
<td>{{stream.Id}}</td>
<td>{{stream.User}}</td>
<td>{{stream.Description}}</td>
function myController($scope) {
$scope.helloMessage = "Hi";
$scope.Data = [{
Success: true,
ErrorMessage: null,
SuccessMessage: null,
Records: [{
"CreatedBy": "Mickey Mouse",
"CreatedDate": "2015-08-17T13:16:22.713",
"CreatedDateDisplay": "17-08-2015",
"Description": "Test 1",
"Id": 7546798576985769857,
"Name": "Test 1",
"UpdatedBy": "",
"UpdatedDate": null,
"UpdatedDateDisplay": null,
"User": null,
"UserId": 0,
"Users": [{
"Users": [{
"Id": 7546798576985769858,
"UserId": 7546798576985769857,
"DisplayName": "Daffy Duck"
}, {
"Id": 7546798576985769859,
"UserId": 7546798576985769857,
"DisplayName": "Pluto"
}],
"User": "Bugs Bunny",
"UserId": 7546798576985769857,
"Name": "Test 2",
"Description": "Test 2",
"Id": 7546798576985769857,
"CreatedBy": "Goofy",
"CreatedDate": "2015-08-25T14:03:28.083",
"UpdatedBy": "Porky Pig",
"UpdatedDate": "2017-03-27T08:19:36.077",
"CreatedDateDisplay": "25-08-2015",
"UpdatedDateDisplay": "27-03-2017"
}]
}]
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app>
<div ng-controller="myController">
<h1>{{helloMessage}}</h1>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
<td>{{stream.Id}}</td>
<td>{{stream.UserId}}</td>
<td>
{{stream.DisplayName}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
First you have to define your controller to body level as following.
<body ng-controller="myController">
You have defined it as h1 level so it is not accessible.
I have made changes in your code please as following.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title
</head>
<body ng-controller="myController">
<h1>{{helloMessage}}</h1>
<div>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
<td>{{stream.Id}}</td>
<td>{{stream.UserId}}</td>
<td>{{stream.DisplayName}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript">
angular.module('app', []).controller('myController',
function ($scope) {
$scope.helloMessage = "Hi";
$scope.Data = [{
Success: true,
ErrorMessage: null,
SuccessMessage: null,
Records: [{
"CreatedBy": "Mickey Mouse",
"CreatedDate": "2015-08-17T13:16:22.713",
"CreatedDateDisplay": "17-08-2015",
"Description": "Test 1",
"Id": 7546798576985769857,
"Name": "Test 1",
"UpdatedBy": "",
"UpdatedDate": null,
"UpdatedDateDisplay": null,
"User": null,
"UserId": 0,
"Users": [{
"Users": [{
"Id": 7546798576985769858,
"UserId": 7546798576985769857,
"DisplayName": "Daffy Duck"
}, {
"Id": 7546798576985769859,
"UserId": 7546798576985769857,
"DisplayName": "Pluto"
}],
"User": "Bugs Bunny",
"UserId": 7546798576985769857,
"Name": "Test 2",
"Description": "Test 2",
"Id": 7546798576985769857,
"CreatedBy": "Goofy",
"CreatedDate": "2015-08-25T14:03:28.083",
"UpdatedBy": "Porky Pig",
"UpdatedDate": "2017-03-27T08:19:36.077",
"CreatedDateDisplay": "25-08-2015",
"UpdatedDateDisplay": "27-03-2017"
}]
}]
}];
});
</script>
</html>
Hope this will help you.
thanks
Thank you, thank you all for your help. I have used Geethu Jose answer, but it still did not give me exactly what I was looking for, but after much head scratching I did come up with a solution for my problem. Instead of using the array placeholders [0] I needed access the arrays themselves at the different levels, so I had to change the code to the following.
<div ng-app>
<div ng-controller="myController">
<h1>{{helloMessage}}</h1>
<table>
<tbody>
<tr ng-repeat="data in Data">
<td>
<table ng-repeat="records in data">
<thead>
<tr>
<th>UserId</th>
<th>User</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{records.UserId}}</td>
<td>{{records.User}}</td>
<td>{{records.Name}}</td>
<td>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tr ng-repeat="streamUser in records.Users">
<td>{{streamUser.Id}}</td>
<td>{{streamUser.UserId}}</td>
<td>{{streamUser.DisplayName}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
It seems that your JSON is full of arrays. It could probably be improved, but there is how you can display it in its current state. You don't need to nest ng-repeat:
<tbody>
<tr ng-repeat="user in Data[0].Records[0].Users[0].Users">
<td>{{user.Id}}</td>
...
</tbody>
Working JSFiddle of your code
I have dynamic result of an array which need to bind with table but some different layout using Angular JS. I have tried many attempt but no success. I have require desired result. Helps are definitely appreciated.
var arr = [
{
"unique_id": "CS",
"college": "BSCS",
"arr_length": 1,
"program_section": [
{
"question": "How you rate your teacher",
"total": 135,
},
{
"question": "Are you satisfy with your teacher",
"total": 142,
},
{
"question": "Which course you have most like throughout the session",
"total": 135,
},
{
"question": "How much you have rate your instructor",
"total": 137,
},
]
},
{
"unique_id": "MBA",
"college": "BBA",
"arr_length": 2,
"program_section": [
{
"question": "How you rate your teacher",
"total": 175,
},
{
"question": "Are you satisfy with your teacher",
"total": 142,
},
{
"question": "Which course you have most like throughout the session",
"total": 165,
},
{
"question": "How much you have rate your instructor",
"total": 137,
},
]
},
{
"unique_id": "CA",
"college": "Account",
"arr_length": 1,
"program_section": [
{
"question": "How you rate your teacher",
"total": 145,
},
{
"question": "Are you satisfy with your teacher",
"total": 162,
},
{
"question": "Which course you have most like throughout the session",
"total": 125,
},
{
"question": "How much you have rate your instructor",
"total": 117,
},
]
}
];
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = arr;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<table border="1" ng-repeat="x in names">
<tr>
<td>Question</td>
<td>{{ x.college }}</td>
</tr>
<tr>
<td>
<table border="1" ng-repeat="y in x.program_section">
<tr>
<td width="100px">{{ y.question }}</td>
<td width="100px">{{ y.total }}</td>
</tr>
</table>
</td>
<td>
</tr>
</table>
</div>
Desired Result
<table width="200" border="1">
<tr>
<td>Question</td>
<td>CS</td>
<td>MBA</td>
<td>CA</td>
</tr>
<tr>
<td>How you rate your teacher</td>
<td>135</td>
<td>175</td>
<td>145</td>
</tr>
<tr>
<td>Are you satisfy with your teacher</td>
<td>142</td>
<td>142</td>
<td>162</td>
</tr>
<tr>
<td>Which course you have most like throughout the session</td>
<td>135</td>
<td>165</td>
<td>125</td>
</tr>
<tr>
<td>How much you have rate your instructor</td>
<td>137</td>
<td>137</td>
<td>117</td>
</tr>
</table>
You have to loop all elements for the table head and then again for your body. I used a fixed number to loop over your questions here. You can simply modify the filter, tho.
JSFiddle
HTML
<div ng-app="myApp" ng-controller="customersCtrl">
<table border="1">
<thead>
<tr>
<td>Question</td>
<td ng-repeat="x in names">{{ x.college }}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in [] | range:4">
<td>
{{ names[0].program_section[n].question }}
</td>
<td width="100px" ng-repeat="x in names">
{{ x.program_section[n].total }}
</td>
</tr>
</tbody>
</table>
</div>
Javascript
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = arr;
}).filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i=0; i<total; i++) {
input.push(i);
}
return input;
};
});
I am facing one issue.I need to display some array of data inside table using Angular.js.I am explaining my code below.
Table:
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<tbody>
<tr>
<td rowspan="2">Date</td>
<td rowspan="2">id</td>
<td rowspan="2">email</td>
<td colspan="7">Order</td>
</tr>
<tr>
<td>Order Id</td>
<td>Status</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
I am explaining my array of data below.
$scope.listOfData=
[
{
"date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
"id": "36",
"email": "raj#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 1111
},
{
"order_status": 0,
"order_id": 2222
},
{
"order_status": 1,
"order_id": 5555
}
]
},
{
"date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
"id": "37",
"email": "rahul#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 3333
},
{
"order_status": 0,
"order_id": 4444
}
]
}
]
I need to display above data into the table using Angular.js.please help me.
Run this code and check out the output. Let me know if you need different format.. cheers!!!
var app = angular.module("myApp",[]);
app.controller("AppController",['$scope',AppController]);
function AppController($scope) {
$scope.listOfData=[
{
"date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
"id": "36",
"email": "raj#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 1111
},
{
"order_status": 0,
"order_id": 2222
},
{
"order_status": 1,
"order_id": 5555
}
]
},
{
"date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
"id": "37",
"email": "rahul#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 3333
},
{
"order_status": 0,
"order_id": 4444
}
]
}
];
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="AppController">
<table cellspacing="5px" style="border:1px solid black;">
<tr >
<th>Date</th>
<th>id</th>
<th>email</th>
<th>Order</th>
</tr>
<tr ng-repeat="orderInfo in listOfData">
<td>{{orderInfo.date}}</td>
<td>{{orderInfo.id}}</td>
<td>{{orderInfo.email}}</td>
<td>
<table>
<tr>
<th>Order stat</th>
<th>Id<th>
</tr>
<tr ng-repeat="orderStat in orderInfo.order">
<td>{{orderStat.order_status}}</td>
<td>{{orderStat.order_id}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
<!--
This is for table inside row.
<tr ng-repeat="orderInfo in listOfData">
<td>{{orderInfo.date}}</td>
<td>{{orderInfo.id}}</td>
<td>{{orderInfo.email}}</td>
<td>
<table>
<tr ng-repeat="orderStat in orderInfo.order">
<td>{{orderStat.order_status}}</td>
<td>{{orderStat.order_id}}</td>
</tr>
</table>
</td>
</tr> -->
Try this
<tr ng-repeat="(key,list) in listOfData">
<td ng-repeat="(key, lists) in list.order "> {{lists.order_status}}</td>
<td ng-repeat="(key, lists) in list.order "> {{lists.order_id}}</td>
</tr>
Make you header fixed of the table, put it outside of your loop.
Put this outside of the loop i.e ng-repeat
<tr>
<td rowspan="2">Date</td>
<td rowspan="2">id</td>
<td rowspan="2">email</td>
<td colspan="7">Order</td>
</tr>
You don't want to create it for every item, as it's going to be fixed.
Now, iterate through your list of json objects, using ng-repeat, as explained above.
Something like this..
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<div ng-repeat="list in listOfData">
{{list.id}}
<div ng-repeat="oderlist in list.order">
{{orderlist.order_id}}
</div>
</div>
</table>
You can modify it accordingly.
This will help you,
<tr ng-repeat="item in listOfData">
<td>
<ul>
<li>
{{item.order}} // or print your array element there
</li>
</ul>
</td>