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?
Related
I have two table, table 1 and table 2.. Table 1 has a field count. based on the count value(count value= no of rows populated), rows should be automatically populated in table 2. I am new to angularjs. Please let me know how can acheive this
To render values in your table you can use ng-repeat directive.
You can use things such the ngIf, ngShow and ngHide directive to hide or show DOM objects based on an expression, or use ngRepeat to dynamically add additional DOM object based on a growing or shrinking array in your controller.
My guess is you're looking for an visibility directive, so I think the following might help:
<table id="table1">
<tr data-ng-repeat="row in table1">
<td>{{row.someData}}</td>
</tr>
</table>
<table id="table2" data-ng-show="table1.length == 0">
<tr data-ng-repeat="row in table2">
<td>{{row.someData}}</td>
</tr>
</table>
Note that both tables are filled with an ngRepeat by using corresponding arrays from your controller as a source. On the second table, you can see an ngShow directive with an expression that says: "if table1 is empty, show me".
I hope this helps.
I am new to Angular and have been trying to make a dynamic table.
The user enters the no of columns he wants and then he can add as many rows to each column as he wants.
I have provided an "add" button at the end of each column to add new row to that particular column.
My code looks somewhat like this:
<table>
<tr>
<th ng-repeat="x in setno"> SET {{x.number}}</th>
</tr>
<tr ng-repeat="z in selected">
<td> </td>
</tr>
<tr>
<td ng-repeat="x in setno">
<button ng-click="selected.push({})"> add </button>
</td>
</tr>
</table>
where, setno is list containing numbers:
$scope.setno[{id:"a", number:"1"},{id:"b", number:"2"},...];
and selected has a similar structure.
The problem is that when I click "add" button of any column, a new row gets add to all the columns.
Whereas I want, a new row to be added to only the one whose "add" button has been clicked.
How can I know whose "add" button has been clicked?
How can i know whose "add" button has been clicked?
You need access to the current $index of the target repeater. Now I'm not sure which it is you're trying to target but you can store an ng-repeater's $index as another variable for access from inner repeaters using the following syntax:
<!-- outer loop -->
<div ng-repeat="(idxA, item) in items)">
<!-- inner loop -->
<div ng-repeat"(idxB, obj) in item.objs">
<ul>
<!-- another inner loop -->
<li ng-repeat="li in obj.pts">
In the above code idxA will be the same as the outer loop's $index, idxB is the inner loop's $index and so on. Then you just pass the index (e.g. idxA or idxB) to your method.
resources:
https://stackoverflow.com/a/18914958/1121919
https://docs.angularjs.org/api/ng/directive/ngRepeat
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]".
AngularJS newbie trying to limit a search filter to one very nested array item. Here's a shot of my output:
<div ng-controller="listController">
<input type="text" ng-model="searchMe" />
<table class="table">
<tr>
<th>Product Name</th>
<th>Color</th>
<th>Size</th>
<th>Features</th>
</tr>
<tr ng-repeat="p in prods | filter:searchMe">
<td>{{p.products.1.ProductName}}</td>
<td>{{p.products.1.Color}}</td>
<td>{{p.products.1.Size}}</td>
<td>
<ul ng-repeat="feats in p.features">
<li>{{feats}}</li>
</ul>
</td>
</tr>
</table>
</div>
Which displays all the items in the list correctly, including the additional features. Now there are at least another dozen items in the products array, including description, price, etc. The issue is if I search something in the box, it searches the entire array. Now I've tried changing the search input to:
<input type="text" ng-model="search.products.1.ProductName" />
<input type="text" ng-model="search.p.products.1.ProductName" />
<input type="text" ng-model="search.ProductName" />
However as soon as I type one character everything disappears. Yes I've also taken the "me" off the search filter (| filter:search). How can I bind the search to a specific item in a nested array? I'll also need to be able to search by features, but I'm hoping by solving this first it'll lead my to the features. Also my content is being pulled in by a json file if that makes a difference. The search features will eventually be checkboxes as well, and not text inputs, but I figure it shouldn't matter, I will still need to target the specific items (name, color, size, etc).
Thoughts/ideas/suggestions?
My solution for the time being is restructuring the json file. Maybe when my knowledge of Angular expands I'll be able to revisit.
I ma very beginner in Angularjs and pardon my silly mistakes. I have a table which shows data in three columns and i want to filter this table based on a condition and hide unnecessary data in one column which contains integers. I have used ng-show with some condition linked to ng-model and this is working perfect if i enter data in my ng-model only after loading total form. But, i want to show all the table data in the beginning and then hide unnecessary data based on ng-show condition.
How can i do this? I am struggling!
<tr ng-show= "change > val1 " ng-repeat="change in montlyProjection();" >
<td>some data</td>
<td class="number">some data</td>
<td class="number" ng-class="positiveNegative(convertToNumber(startBalance) + change)">some data</td>
</tr>
</strong><input type="text" ng-model="val1" placeholder="Enter Amount" />
<tr ng-show="((change > val1) || !val1)" ng-repeat="change in monthlyProjection()">
Try adding additional conditions to the ng-show directive. If !val doesn't work try using "angular.equals(val1,'')" or "angular.isDefined(val1)"