I am pretty new to Angularjs and I would like to achieve an editable table similar to this jsfiddel http://jsfiddle.net/NfPcH/93/ (retrieved from the official angular doc) however instead of hardcoded data, how can I fill the table with a List of data retrieved from the database in MVC or a ViewBag?
for example instead of this MVC table below I would like to achieve to achieve the same thing but instead using Angular to make the table editable.
#if (ViewBag.Session != null)
{
<table class="table table-hover">
<tr>
<th>
ID
</th>
<th>
Name
</th>
<th>
Surname
</th>
<th>
House
</th>
<th>
Address
</th>
<th>
Locality
</th>
<th>
Contact
</th>
<th>
Contact 2
</th>
<th>
Contact 3
</th>
<th>
Reply
</th>
<th>
Edit
</th>
</tr>
#foreach (var item in ViewBag.Session)
{
<tr>
<td>
#item.ID
</td>
<td>
#item.Name
</td>
<td>
#item.Surname
</td>
<td>
#item.House
</td>
<td>
#item.Address
</td>
<td>
#item.Locality
</td>
<td>
#item.Contact1
</td>
<td>
#item.Contact2
</td>
<td>
#item.Contact3
</td>
<td>
#item.Reply
</td>
</tr>
}
</table>
Additionally, when a row is changed and saved, how can the data be sent back to the backed to be save in the database?
I think it would be a good idea for you to read a jumpstart tutorial, training, or book.
Here you have a link to get started using web api in the server side plus angularjs on the client, it just load a list of items from the server.
http://www.youtube.com/watch?v=Ja2xDrtylBw
Related
I have a use case, i'm struggling to put together.I want to display prices of goods from different shops like in the picture below.
My problem is i get the following table;
The output on my table is incorrect. Price for Zimgold is only available in Spar. But here its displayed under all other shops. The same goes for Raha.Its Price is supposed to be under OK.I want other shops to have a dash or empty rows if they don't have that product.
Here is my vue.js code:
<modal ref="comparisonTable" no-close-on-backdrop no-close-on-esc hide-cancel width="600px" title="GENERATE BILL" :hide-ok="true" hide-footer centered>
<Spinner v-show="productsLoader" :message="productsLoaderMessage" size="medium"></Spinner>
<table class="table table-striped " v-show="productsTable" width="100%">
<!--Table head-->
<thead>
<tr class="table-info">
<th>Product Brands</th>
<th v-for="company in selectedCompaniesDetails" :key="company.id">
{{company.name}}
</th>
<th>Pick</th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr v-for="product in products" :key="product.id">
<th scope="row">
{{product.name}}
</th>
<td v-for ="totalCompanies in totalSelectedCompanies" :key="totalCompanies">
<span>
{{product.price}}
</span>
</td>
<td>
<input type="checkbox" style="margin:10px;" v-model="selectedProducts" :value="product"/>
</td>
</tr>
<tr>
<th scope="row">
</th>
<td v-for ="totalCompanies in totalSelectedCompanies" :key="totalCompanies">
</td>
<th>
<button #click="generateFinalBill($event)">
GENERATE BILL
</button>
</th>
</tr>
</tbody>
</table>
</modal>
In your example you have two nested for loops, the outer one loops through products and the inner one loops through totalSelectedCompanies.
The problem is that your product.price variable only changes with each iteration of the outer loop. In order to display a different price for each iteration you would need to have the value be affected by the inner loop.
The way you do this would depend on how the price is stored or calculated but the one way to do this is to store the prices for each seller in the product object and loop through that:
<tr v-for="product in products" :key="product.id">
<th scope="row">
{{product.name}}
</th>
<td v-for ="seller in product.sellers">
<span>
{{seller.price}}
</span>
</td>
<td>
<input type="checkbox" style="margin:10px;" v-model="selectedProducts" :value="product"/>
</td>
</tr>
An issue with this is that you would have to have every seller in product.sellers regardless of if they actually sold it. Instead I would make a method that returns the price of a product from the given company, then you could do something like:
<tr v-for="product in products" :key="product.id">
<th scope="row">
{{product.name}}
</th>
<td v-for ="company in selectedCompanies">
<span>
{{calculateCompanyPrice(product, company)}}
</span>
</td>
<td>
<input type="checkbox" style="margin:10px;" v-model="selectedProducts" :value="product"/>
</td>
</tr>
calculateCompanyPrice() would then contain all the logic for returning the price you need from a given product and company, including displaying a dash if the company does not sell the given product.
Edit: It's worth noting that you can technically put any valid javascript between your {{ }}s, so I'm sure there are many other ways of outputting the proper price within the inner loop.
I'm trying to display a table from a model. But the problem is that my model class has a string that already includes an <a> tag.
My view is:
#model MyWeb.Models.Incidente
#{
Layout = null;
ViewBag.Title = "Communication for " + Model.num.ToString();
}
<h2>#ViewBag.Title</h2>
<table class="table">
<tr>
<th> User </th>
<th> Date </th>
<th> Time </th>
<th> Message </th>
</tr>
#foreach (MyWeb.Models.Comunication item in Model.GetComunications())
{
<tr>
<td> #Html.DisplayFor(modelItem => item.user) </td>
<td> #Html.DisplayFor(modelItem => item.date) </td>
<td> #Html.DisplayFor(modelItem => item.time) </td>
<td> #Html.DisplayFor(modelItem => item.message) </td>
</tr>
}
</table>
The problem is that one item in GetComunications() has a message that include a link to Google:
You can Google it, just press Here!. Thank you!
So when the table is displayed the message shows the tag instead of creating the link in "Here!".
How can I solve this problem, and show a message that already has a link on the string?
If you are sure about the sanitation of your output, you can use Html.Raw:
#Html.Raw(Html.DisplayFor(modelItem => item.message))
I am having trouble getting focus on my table and i am not sure how i should mark it up so it could get access via keyboard.
<table class="table table-bordered">
<thead>
<tr>
<th scope="col" class="sortable" width="10%" (click)="onHeaderClick('id')"
[ngClass]="{'active': sortBy == 'id', 'ascending': sortOrder == 'asc', 'descending': sortOrder == 'desc'}">
Id
</th>
<th scope="col" class="sortable" width="50%" (click)="onHeaderClick('name')"
[ngClass]="{'active': sortBy == 'name', 'ascending': sortOrder == 'asc', 'descending': sortOrder == 'desc'}">
Name
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of studentList" (click)="selectedStudent(student)">
<td>
{{student.uId}}
</td>
<td>
<a (click)="profile(student)">{{student.fields.Name}}</a>
</td>
</tr>
</tbody>
</table>
You should use button elements inside the table header cells instead of trying to make the th elements themselves interactive.
Buttons are designed to be interacted with and come with all the affordences to help the user work with them.
I have problem putting a uikit progress bar inside a uikit table cell, i have searched for getuikit for progress bar and table documentation I googled everything but found no any good community or resources out there.
Here is my simplified html file for table:
<table class="uk-table uk-table-hover uk-overflow-container">
<thead>
<tr>
<th>
Employee
</th>
<th>
<label class="uk-form-label" for="name" style="font-weight: lighter;">
Contact
</label>
</th>
<th>
Workplace/Position
</th>
<th>
Status
</th>
<th>
Work Completed (%)
</th>
</thead>
<tbody>
<tr>
<td>Luigi Lascuña</td>
<td>Igi#skyes8.com</td>
<td>Main Office/General Manager</td>
<td>Regular</td>
<td class="uk-progress">
<div class="uk-progress-bar" style="width: 40%;">40%</div>
</td>
</tr>
</tbody>
</table>
Here is my output:
There result will only display the 40% text inside a table cell but
not just like in the documentation.
I just include the components/progress.css to my styles block in the head of the main html file. This solved my problem!
I'm really new at using Razor with MVC, and so far I really like it.
One little thing I want to do is write a variables value to an attribute in HTML.
For example, if I had the following:
<table style="width: 100%">
<tr>
<th>
ID
</th>
<th>
Name
</th>
<th>
Value
</th>
</tr>
#foreach (var item in Model)
{
<tr id="ID#item.id">
<td>
#item.id
</td>
<td>
#item.name
</td>
<td>
#item.value
</td>
<td>
</tr>
}
</table>
I would want all the tags to have an ID equal to "ID[insert item's id]", but instead I get an ID equal to "ID#item.id".
How do I write a variable's name between HTML quote marks?
Thanks!
This pattern is recognized as an email address. Do the following to work around this behavior:
<tr id="ID#(item.id)">