1

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?

Christian
  • 4,345
  • 5
  • 42
  • 71
  • 1
    How about adding [Pagination](http://angular-ui.github.io/bootstrap/#/pagination)? I also suggest using one-time binding so angular will have less updates on every digest loop. Example of [one time binding](https://docs.angularjs.org/guide/expression): `{{ ::address.id }}` And `{{ ::address.label }}` (You just add `::` before the expression) - this will defenetly help getting better performences – Alon Eitan Jun 03 '16 at 12:54
  • refer to this one http://stackoverflow.com/questions/21375073/best-way-to-represent-a-grid-or-table-in-angularjs-with-bootstrap-3 – shershen Jun 03 '16 at 12:57
  • this actually should not be related to angular - html input takes much, much more system resources than angular scope. But 200? 200 inputs should be handled quite well. – Petr Averyanov Jun 03 '16 at 12:58
  • good idea with one time binding an pagination! Will look into it. I somehow fear that all these input's are making things bad. Maybe you're right and it's not the scopes but the elements, so I will need to redesign such that there is just one input on the selected row or so.. – Christian Jun 03 '16 at 13:46
  • How do you bind `ngModel` to the inputs? – Alon Eitan Jun 03 '16 at 13:48
  • I'm binding it by using ng-model="addresstext", and addresstext is a property on the address object, which is passed to the table-row directive – Christian Jun 03 '16 at 14:11
  • 1
    @Christian So google about `require ngmodel directive` here is one example: https://www.reddit.com/r/angularjs/comments/3hvncf/ngmodel_on_a_directive/ - Then you can use your directive like this: `` – Alon Eitan Jun 03 '16 at 14:31
  • 1
    great idea, thanks @AlonEitan I will check this out. actually these are already many improvements, it should all together make it work :) – Christian Jun 03 '16 at 20:12

0 Answers0