vendredi 11 septembre 2015

Angular ng-repeat best practice to only watch for updates inside the specific iteration

I need to render a table in which the user is allowed to edit some fields for each row, fields that will affect other fields in the same row.

For this reason I could not use bind-once on all the data I'm rendering.

If I got it right, simply using a code like the following

<table class="table table-bordered table-condensed table-hover">
  <thead>
    <tr class="info">
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="a in alist">
      <td>{{::a.id}}</td>
      <td>{{::a.cod}}</td>
      <td>
        <input
          ng-model="a.sel"
          type="checkbox"
          class="input-sm"></input>
      </td>
      <td ng-if="a.sel">
        {{::a.desc}}
      </td>
      <td ng-if="!a.sel">
        "Other Content"
      </td>
    </tr>
  </tbody>

will cause that for each time a user checks or uncheks the a.sel checkbox, all the angular {{vars}} in the page (not the {{::vars}}) will be watched for changes.

If this is true (and therefore that's the reason why page is slow when hundreds of rows are loaded) how could I tell angular I only want it to check if something has changed inside that specific row, that specific ng-repeat iteration?

Not sure how to proceed to get good performances, any other tips are appreciated.

Thank you for your help.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire