Working on some array projects but Stuck on point where *ngFor did't accept dynamic value provided by another *ngFor.
<table border="2">
<tr>
<th rowspan="2">Subject</th>
<th colspan="4" *ngFor='#category of json.category_name'>{{category}}</th>
<th colspan="4">Overall</th>
</tr>
<tr>
<div *ngFor="#category of json.category_name">
<th *ngFor="#fa of json.total_fa.category">{{fa}}</th> //Not Working
</div>
</tr>
</table>
here in the commented line i want to provide json.total_fa.category where this category is coming from another *ngFor which is declared just above. but getting no result it seems angular try to find out json.total_fa.category itself which is not present.
but i want to load json.total_fa_term1 (which is first index from the category). how can i achive this.
Can i use more than one *ngFor on same HTML component ?
sometimes *ngFor and *ngIf is not working properly while embed on the same element why ?
here is my workground demo
You need to use .total_fa[category] instead of .total_fa.category otherwise you will try to access a property with name category:
<div *ngFor="#category of json.category_name">
<th *ngFor="#fa of json.total_fa[category]">{{fa}}</th>
</div>
See the updated plunkr: http://plnkr.co/edit/v08AdzNsR4GHMlZWQNsR?p=preview.
Related
I am creating a table from data brought in as a JSON. This could be tonnes of data so I have a loop making all the rows in the table. I want to be able to click on a row and have that row expand showing the 2nd row with the list.extraInfo beneath it. Code looks like this:
<tbody *ngFor= " let list of lists, let i = index ">
<tr data-toggle="collapse" data-target="#{{i}}" class="clickable">
<td > something </td>
<td >{{i+1}}</td>
<td >{{list.name}}</td>
</tr>
<tr >
<td colspan="3">
<div id="{{i}}" class="collapse">
{{list.extraInfo}}
</div>
</td>
</tr>
</tbody>
I'm well aware that having data-target="#{{i}}" and id="{{i}}" doesn't work, but I cannot find anywhere what it is I need to put there to get every row of the table to have a separate and distinct id number so that the collapse feature works on the row that you click on.
As it stands it opens the extraInfo row for the 1st row regardless of which row I click on.
Curly brace syntax ({{ }}), also called interpolation, is meant for inner HTML. That is why {{i+1}} works in your td but not in your tr tag. To use a variable in a <tr> attribute, you don't need to wrap it in curly braces.
Secondly, the Can't bind to 'target' since it isn't a known property of 'tr'. error suggests that you need to use an attribute input binding instead:
<tr data-toggle="collapse" [attr.data-target]="'#'+ i" class="clickable">
I have issues with data values in a table and I'm trying to wrap the data in anchor tags so that it can be a downloadable link i tried to use ng-href but i can use target. is there an easier way of doing this? i was the data to show normally on the browser and have use click on it to download an image. but it shows an ugly anchor tag as well :/ this is my code with normal a href
i have tried using this as well, which was an answer for angular.js link behaviour - disable deep linking for specific URLs
<td><a target="_self" href="//tomcmmsweb.pca.com/DocumentLibrary/Download/{{item.documentId}}">{{item.jobNumber}}</a></td>
but above still didnt work. im using angularJS 1.2.16, im running out of ideas and im notthat much of an expert with angularJS. would really appreciate some knowledge.
<table class="table table-striped table table-hover">
<thead>
<tr>
<th>Project Manager</th>
<th>Job Number</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in counce">
<td>{{item.projectManager}}</td>
<td>{{item.jobNumber}}</td>
<td>{{item.description}}</td>
<td>{{item.totalAmount*1000 | currency}}</td>
</tr>
</tbody>
</table>
I have three tables which are using using different variables for displaying the data.
Basic structure of the table
<table>
<thead>
<tr>
<th ng-repeat="var in array2"><i ng-show="array3[$index]=0"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="var in variable">
<td ng-repeat="var1 in var">{{var1.position}}</td>
</tr>
</tbody>
</table>
All the three tables are using different arrays for variable, array2 and array3. Is there any way I don't have to write the code thrice and I can loop the code for three tables.
Please suggest changes in data structures only when there are no other possible HTML solution to change it.
You need to check for directives, for instance <my-table-directive datas="array1"></my-table-directive>
This directive will hold the logic and templaces and you'll pass a variable to define the content.
I am working on a web application where I get some string data using Java Servlets and then subsequently display that data on a JSP view using JSTL. Below is the code snippet:
<table border="1" width=100%>
<th style="width: 10%">S. NUMBER</th>
<th style="width:35%"> First Name </th>
<th style="width: 35%"> Second Name </th>
<th style="width: 10%">Student ID</th>
<th style="width: 10%">Student Class</th>
<c:forEach items="${sortedResults}" var="result">
<tr>
<td>${result.counter}</td>
<td>${result.sequenceIntEx}</td>
<td>${result.lName}</td>
<td>${result.sID}</td>
<td>${result.sClass}</td>
</tr>
</c:forEach>
For example, the lName field, i want to display the 3rd and 4th characters in a bigger font size with different color. Any thoughts?
Perhaps assign systematic element names ex. id="td1" id="td2" etc. and then use jsp to generate a css file that matches the automatic element names and filling in any parameters needed depending on your criteria.
So, i got this working using substring functions in JSTL. First, the following needs to be imported:
<%# taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
Then, i used the substrings to do the needed formatting.
<td>${fn:substring(result.sequenceIntEx, 0, 3)}<font size="5" color="red">${fn:substring(result.sequenceIntEx, 3, 5)}</font>${fn:substring(result.sequenceIntEx, 5, 13)}</td>
Thanks
I am using Grails and I am currently faced with this problem.
This is the result of my html table
And this is my code from the gsp page
<tr>
<th>Device ID</th>
<th>Device Type</th>
<th>Status</th>
<th>Customer</th>
</tr>
<tr>
<g:each in = "${reqid}">
<td>${it.device_id}</td>
</g:each>
<g:each in ="${custname}">
<td>${it.type}</td>
<td>${it.system_status}</td>
<td>${it.username}</td>
</g:each>
</tr>
So the problem is, how do I format the table such that the "LHCT271 , 2 , Thomasyeo " will be shifted down accordingly? I've tried to add the <tr> tags here and there but it doesn't work.. any help please?
I think you problem is not in the view, but in the controller (or maybe even the domain). You must have some way of knowing that reqid and custname are related if they are in the same table. You must use that to construct an object that can be easily used in a g:each
You are looking for a way to mix columns and rows, and still get a nice table. I'm afraid that is not possible.
Edit
(Sorry, I just saw the last comment.)
You cannot mix two items in a g:each.
Furthermore, if the two things are not related you probably must not put them in the same table. There will be no way for you or for Grails, to know how to properly organize the information
Do you want to display the first reqid against the first custname (three fields), the second againts the second and so on? And are those collections of same length?
In such case you could try the following:
<tr>
<th>Device ID</th>
<th>Device Type</th>
<th>Status</th>
<th>Customer</th>
</tr>
<g:each var="req" in="${reqid}" status="i">
<tr>
<td>${req}</td>
<td>${custname[i].type}</td>
<td>${custname[i].system_status}</td>
<td>${custname[i].username}</td>
</tr>
</g:each>