AngularJs table is not working as expected.
I am trying to show the values of "sets" where it contains 10 values.
So what is want to do is that i want to create 10 rows, where it will show "set number" 1 to 10.
But it is displaying all the 10 values in a single rows, how i can make it 10 rows !!
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th>Sets Number</th>
<th>Score of Sets 1</th>
<th>Score of Sets 2</th>
</tr>
</thead>
<tbody>
<tr>
{% for x in sets %}<td>{{ x }}</td>{% endfor %}
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
Which is looking like so --
You need to use the ng-repeat directive provided in angular as follows
<tr data-ng-repeat="x in sets">
<td> {{ x }} </td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
You can follow the example on http://www.w3schools.com/angular/tryit.asp?filename=try_ng_repeat_array
DEMO: http://plnkr.co/edit/NHfCZ7FgcKGCNpIQVpfU?p=preview
Related
Tried to get table's first column td value after selected dropdown change values but not working.
I want to get first column td value after selected dropdown in angular 6.
I have given my code below. Anyone can have idea?please help to find the solution.
<table class="table table-striped table-hover" id="wrapperTbl">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Job</th>
<th>YearJoined</th>
<th>Missions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let astronaut of astronautsToBeSelected" class="clickable">
<td (click)="selectAstronaut(astronaut)">{{astronaut.id}}</td>
<td (click)="selectAstronaut(astronaut)">{{astronaut.name}}</td>
<td (click)="selectAstronaut(astronaut)">{{astronaut.job}}</td>
<td (click)="selectAstronaut(astronaut)">{{astronaut.year_joined}}</td>
<select (change)="selected()">
<option *ngFor="let mission of astronaut.missions" [selected]="mission.name == 'back'">{{mission}} </option>
</select>
</tr>
</tbody>
Demo:
https://stackblitz.com/edit/how-to-show-the-dynamic-table-with-dropdown-in-angular-todepv?file=app%2Fapp.component.html
You can do the following -
<tbody>
<tr *ngFor="let astronaut of astronautsToBeSelected" class="clickable">
<td (click)="selectAstronaut(astronaut)">{{astronaut.id}}</td>
<td (click)="selectAstronaut(astronaut)">{{astronaut.name}}</td>
<td (click)="selectAstronaut(astronaut)">{{astronaut.job}}</td>
<td (click)="selectAstronaut(astronaut)">{{astronaut.year_joined}}</td>
<td><select (change)="selected($event, astronaut.id)">
<option *ngFor="let mission of astronaut.missions" [selected]="mission.name == 'back'">{{mission}} </option>
</select>
</td>
</tr>
</tbody>
When you want to access any event, you will need the $event in the html. You can also pass additional parameters you want.
selected(event, id){
//tbal id is wrapperTbl
alert(event.target.value + '|' + id )
}
Hope this helps.
I am trying to order by the likes of an answer. I looked at the angular documentation for orderBy and it looks like I am following it. However, my table is not ordering by the likes for answer. Here is my html. If you want me to post more code let me know.
<div ng-controller="answerAndQuestionController">
<h1 ng-bind='question.question'></h1>
<h1 ng-bind='question.description'></h1>
<table>
<thead>
<tr>
<th>Answer</th>
<th>Description</th>
<th>User</th>
<th>Likes</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "answer in answers | orderBy:'answer.likes'">
<td><input ng-model = "answer.answer" readonly></td>
<td><input ng-model = "answer.description" readonly></td>
<td><input ng-model = "answer.user" readonly></td>
<td><input ng-model = "answer.likes" readonly>
<button ng-click = "like(answer.answer)" href="">like</button>
</td>
</tr>
</tbody>
</table>
</div>
If you check Angular's orderBy example you'll notice the analogy to define expression in orderBy without "object" (answer)
<tr ng-repeat = "answer in answers | orderBy:'likes'">
How can I update multiple textbox in database using ASP.NET Web Pages(razor syntax). I want to edit emails of students. And the number of rows containing textbox varies or dynamic. Somebody help.
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>Jason</td>
<td><input type="text" name="txtbox1"></td>
</tr>
<tr>
<td>Kripkee</td>
<td><input type="text" name="txtbox2"></td>
</tr>
<tr>
<td>Kane</td>
<td><input type="text" name="txtbox3"></td>
</tr>
<tr>
<td>Michael</td>
<td><input type="text" name="txtbox4"></td>
</tr>
<tr>
<td><input type="submit" value="Update"></td>
</tr>
</table>
</form>
You can try this:
Assuming you have a view model providing a list of students.
View -
#foreach (var student in Model.Students)
{
<tr>
<td>#student.Name</td>
<td><input name="studentEmails[#student.Id]"/></td>
</tr>
}
Controller -
public ActionResult UpdateEmails(IDictionary<int, string> studentEmails)
I have a form on my cfm page, that is to insert a new row into an SQL datasource. The cfm page hosts the form - and when submitted the -action.cfm page inserts the data and relocates the user to a page listing the new information. The problem I am getting is when I submit the form I am getting:: Element NEWUSERID is undefined in FORM.
the form on the insertScores.cfm page:
<form method="post" action="insertScores-action.cfm">
<table>
<tr>
<td>User ID</td>
<td><input name="newUserID" type = "text" size = "50"></td>
</tr>
<tr>
<td>First Name</td>
<td><input name="newFirstName" type="text" size="50"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input name="newLastName" type="text" size="50"></td>
</tr>
<tr>
<td>Email</td>
<td><input name="newEmailAdd" type="text" size="50"></td>
</tr>
<tr>
<td>Score</td>
<td><input name="newScore" type="text" size="50"></td>
</tr>
<tr>
<td>Pass Date</td>
<td><input name="newPassDate" type="text" size="50" value="dd/mm/yyyy"></td>
</tr>
<tr>
<td>Level</td>
<td><input name="newLevel" type="text" size="50"></td>
</tr>
<tr>
<td><input type="submit" value="Insert Scores"></td>
</tr>
</table>
The insertScores-action.cfm page
<cfquery name="insertScores" datasource="staffwrite">
INSERT INTO protinfo_scores (
userID
, first_name
, last_name
, email
, curr_score
, curr_score_date
, level
)
VALUES (
'#form.newUserID#'
, '#form.newFirstName#'
, '#form.newLastName#'
, '#form.newEmailAdd#'
, '#form.newScore#'
, '#form.newPassDate#'
, '#form.newLevel#'
)
</cfquery>
<cfquery name = "queryScore" datasource="staff">
SELECT userid, level
FROM protinfo_scores
WHERE userid LIKE '#form.newUserid#'
AND level = '#form.newLevel#'
</cfquery>
<cflocation URL="newScore.cfm?userid=#url.userid#&level=#url.level#">
newScore.cfm
<center>
<h2>Your ammendments have been made.</h2><hr>
</center>
<cfquery name = "queryScore" datasource="staff">
SELECT first_name, last_name, email, curr_score, curr_score_date, userid, level
FROM protinfo_scores
WHERE userid LIKE '#URL.userid#'
AND level = #URL.level#
</cfquery>
<cfoutput query="queryScore">
<table>
<tr bgcolor=beige>
<td>Name</td>
<td width="40">#queryScore.first_name# #queryScore.last_name#</td>
</tr>
<tr>
<td>Email</td>
<td width="40">#queryScore.email#</td>
</tr>
<tr bgcolor=beige>
<td>Username</td>
<td width="100">#queryScore.userid#</td>
</tr>
<tr>
<td>Level</td>
<td width="100">#queryScore.level#</td>
</tr>
<tr bgcolor=beige>
<td>Current Score</td>
<td width="40">#queryScore.curr_score#</td>
</tr>
<tr>
<td>Date Passed</td>
<td width="40">#queryScore.curr_Score_date#</td>
</tr>
</table>
</cfoutput>
and when submitted the -action.cfm page inserts the data and relocates
the user to a page listing the new information
I can't tell from the wording if this is the desired effect or the actual effect. If it is the actual effect, your error is occurring on newScore.cfm which would make sense because the data in the form scope does not persist after the cflocation and you're trying to use form.newUserID after the output table..
If this is the desired effect and NOT the actual effect...
As Dan said, you're looking at two different files. You show code from insertScores-application.cfm but your action is pointing to insertScores-action.cfm.
The code in your question is not exact copy/paste or even all of your code (you're missing a </form> tag to say the least). In this case I'd suggest showing us the actual code AND the error message. Many times I see element XXX is undefined in FROM (notice it says FROM and not FORM, something easy to miss when you're staring at the same thing for hours). The error message will tell you what line number the error is on. Is the line number actually among the code you posted?
I changed my <form></form> to a <cfform></cfform> and all now appears to work swimmingly. I was under the impression this would not make any difference but clearly it does.
I have this sample table in jsfiddle.net how my table should look like
The second column can have more than one row that should coincide with the original columns. I am very confused how to achieve this using jstl <c:forEach>
This is the code I have written which prints everything in the same row because i don't have any break statements for the inner foreach but I want something similar to what I have in jsfiddle
<c:forEach items="${abc.bcd }" var="abc">
<tr>
<td align="center"><c:out value="${abc.interval }" /></td>
<td><c:out value="${abc.operation}" /></td>
<td>
<c:forEach items="${abc.parts.info}" var="info">
<c:out value="${info.number}" />
<c:out value="${info.quantity}" />
<c:out value="${info.name}" />
</c:forEach>
</td>
</tr>
</c:forEach>
I dunno how to detail the specs of how HTML based tables work, but the overall is rows within a single column isn't how it was developed to work. As the ration of rows with columns need to balance out in a matter of speaking.
If you have a column where you need the appearance of rows, your best bet it to place a new table within that column and build out the appearance of said rows within it
example:
<table>
<tr>
<td>
<table>
<tr>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
</table>
</td>
</tr>
</table>
Looking at what you have constructed so far, it looks like you have a Map at abc.parts.info. If you have an ordered map, like a LinkedHashMap, you could iterate trough the map:
<c:forEach items="${abc.bcd}" var="abc">
<tr>
<td align="center"><c:out value="${abc.interval}" /></td>
<td><c:out value="${abc.operation}" /></td>
<c:forEach items="${abc.parts.info}" var="info">
<td><c:out value="${info.value}" /></td>
</c:forEach>
</tr>
</c:forEach>
If you have an unordered map, like a HashMap, you could just access values in your map using EL (assuming your keys are strings):
<c:forEach items="${abc.bcd}" var="abc">
<tr>
<td align="center"><c:out value="${abc.interval}" /></td>
<td><c:out value="${abc.operation}" /></td>
<td><c:out value="${abc.parts.info['number']}" /></td>
<td><c:out value="${abc.parts.info['quantity']}" /></td>
<td><c:out value="${abc.parts.info['name']}" /></td>
</tr>
</c:forEach>