I'm attempting to build an import for our system. I accept an excel file, parse it within a web api into a data table object (number of columns and rows is unknown). I send the data table via json back to my angular app. After a user maps the columns to fields in our database, I then take the data table, pass it back to an api.
The problem is when I pass the table back to the api, any changes I've made to the data isn't applied. It's as if ng-model isn't working
<table>
<tr ng-repeat="row in dt track by $index">
<td ng-repeat="col in row">
<input type='text' ng-model="col" />{{col}}
</td>
</tr>
</table>
Visually this produces exactly what I want. The {{col}} visually shows me that typing different data shows me ng-model must be updating, because {{col}} always shows the value inside the text box
But when I pass my data table to the api, it contains all the original values
ng-model="col" sets the value of col, which is a copy of what is in row[$index]. To update the value which in row, use ng-model="row[$index]".
Related
In React I am creating a table with some inputs above it. The input fields are for filtering the table.
So I am wondering how the correct syntax would be for displaying the result from a form submit. I want this to be WCAG approved. Should I place the table just below the form? Or should i connect them in some way?
<form>
...
</form>
<table>
...
</table
And is it correct to place the input fields and the search button in a form? I would think so.
Thank you for any help!
It's fine to have both the form and the table on the same page.
The form itself should be accessible which means you'll need:
labels associated with each form element
appropriate handling of error messages
The table itself should be accessible which means you'll need:
proper table structure
use native <table>
use native <tr>
use native <th scope="col"> and <th scope="row">
use native <td>
And the final piece is the communication of when the filters are applied and the table updates. What happens visually? Is it just the contents of the table are updated? Do you have any other text on the screen that updates such as "X results found"?
If only the table updates, then you'll want to have a "hidden" message that is announced for screen reader users. Sighted users will see the table update but you should communicate that to non-visual users too. That can be done with "live" regions. It's pretty easy. You just have a container (<div>) that is visually hidden but can be updated with text. Something like:
<div class="sr-only" aria-live="polite">
</div>
When the table is updated, it would look like this:
<div class="sr-only" aria-live="polite">
Table has updated.
</div>
(The actual message should probably be better than that. Discuss that with your designer.)
The "sr-only" class is not something that is built in. You'd have to define it. That's just a common name to use for a class that is used to create text that is for "screen readers only" (sr-only). See What is sr-only in Bootstrap 3?
I want to insert a table with two columns where the first column contains several rows and second column should contain a single row. To achieve this I wrote code like below.
<tr ng-repeat="x in data">
<td>{{ x.no }}</td>
<td ng-if="this.rowIndex === 0" rowspan='{{x.length}}'> ok </td>
</tr>
Where data is an array of JSON objects containing single property called no. Using this.rowIndex is correct here or Am I making mistake here.
You have to use the variable $index from the ng-repeat directive (see the documentation).
Furthermore, you read the length of the x object; I believe you intended to do so with the data variable.
You can see the result in this codepen.
In my AngularJS website, I would like to show a table containing adresses that should be editable in the cells. This is how the columns look like:
Id, Label, Address, Geolocation, Additional Information
The Address column contains an input element, so that I can search for another address to change the data.
The table has sometimes more than 200 rows. I am experiencing massive performance problems when loading the table the first time and also when resizing the div in which the table is.
My approach so far:
Table HTML:
<div>
<table>
<tbody>
<tr table-row
address="address"
ng-repeat="address in data">
</tr>
</tbody>
</table>
</div>
I came up with a custom directive "table-row" which contains the td elements for a single row. It also has its own scope under which the address can be changed.
Table-row HTML:
<td>
{{ address.id }}
</td>
<td>
{{ address.label }}
</td>
<td>
<input type="text"
ng-model="addresstext"/>
</td>
...
Some thoughts on how this could be done better:
The main problem with my code is that the table is getting pretty big and I keep creating a scope for every single row. I suppose that the performance is going to increase if there would just be a single scope. However, I do not see how to do this without an ng-repeat to create the rows.
Isn't there a way to have one scope for the table and still a dynamic number of rows in the table, each being editable with the input textboxes in the cells?
I am loading data from database in JSON Format, like this: ($scope.fees):
{"1_0":"2000","1_1":"1900","1_2":"1800","1_3":"1700","1_4":"1600","1_5":"1500","1_6":"1400","1_7":"1300","2_0":"4000","2_1":"3900","2_2":"0","2_3":"0","2_4":"0","2_5":"0","2_6":"0","2_7":"0"}
This needs to be displayed in a table (like grid), in which rows and columns are not fixed. This code works for me now:
<tbody data-ng-repeat="obj in courses"><!-- Courses JSON -->
<tr><th>{{obj.name}}</th></tr>
<tr data-ng-repeat="bat in obj.batches"><!-- Each course contains Batches -->
<td>{{bat.bname}}</td>
<td data-ng-repeat="obj in categories"><!-- Columns based on categories -->
<input type="text" name="{{bat.bid}}_{{obj.id}}" data-ng-model="fees.1_0" />
</td>
</tr>
data-ng-model="fees.1_0" should be actually as provided for the name attribute: data-ng-model="fees.{{bat.bid}}_{{obj.id}}" but this doesn't work. Is there any solution to get this working? Thanks in advance.
Edit: I can change the JSON format if there is a better solution to get this done. The current format is batch<underscore>category: fees
Try data-ng-model="fees[bat.bid + '_' + obj.id]"
Check this Demo. This shows how to attach model dynamically from JSON object.May this will help you.
Just like variable keys in javascript use [] in the ng-model as the as bracket value must be your object key
I have the following code
<tr>
<th ng-click="predicate='-name'; reverse=false;">Name</th>
<th ng-click="predicate='age'; reverse=true;">Age<th>
<tr>
<tr ng-repeat="user in users | orderBy:predicate:reverse">
<td>{{user.name}}<td>
<td>{{user.age}}</td>
</tr>
My aim here is whenever i click on the table header, then the corresponding column has to be sorted based on particular predicate and reverse. And that is happening perfectly. But I have a scenario where, when i click on an external object, then my age value in table changes here and hence as a result the table sort order is getting disturbed. But i don't want sort to get disturbed. How can i skip table to not obey sort on other actions and have it only on click of table column headers? Can anyone help me with this?
I don't think this is possible. Whenever "users" changes, Angular will notice (since that scope property (i.e., "users") is bound (one-way data binding) to the ng-repeat directive), and Angular will update the view.