AngularJS function inside curly binding triggers for each click

Question

I have a use case where I have to bind value to column in table by triggering a call to function which returns username. The table rows is looped using ng-repeat-start and pagination is used to display records.

Code 1 :

<td class="col-sm-2 col-md-2 col-lg-2">
  {{::getLogUserName(site,key,innerKey)}}
</td>

Code 2 :

 <td class="col-sm-2 col-md-2 col-lg-2"
     ng-init="userName = getLogUserName(site,key,innerKey)">
   {{userName}}
 </td>

Code 3 :

<td class="col-sm-2 col-md-2 col-lg-2"
    ng-init="userName = ::getLogUserName(site,key,innerKey)">
  {{userName}}
</td>

Above 3 examples works fine in Page 1, but for subsequent pages the function is not triggered in most scenarios.

Code 4 :

<td class="col-sm-2 col-md-2 col-lg-2">
  {{getLogUserName(site,key,innerKey)}}
</td>

getLogUserName gets trigerred for each click event and action, which should not be the case since pagintion entries could be 100 per page and triggering of the function each time is not expected.

Is there an alternate to achieve the functionality am expecting without compromising on performance

georgeawg · Accepted Answer · 2019-11-03 10:51:00Z

1

With the following example, the function is execute at least once each digest cycle:

<td class="col-sm-2 col-md-2 col-lg-2">
  {{getLogUserName(site,key,innerKey)}}
</td>

This is as expected. Care should be taken that the function be idempotent and uses minimal computing resources. Also avoid functions that invoke asynchronous operations.

getLogUserName doesn't trigger any API call, just a normal function which filters username and returns it.

In that case it, it would be more efficient to use a custom filter:

<td class="col-sm-2 col-md-2 col-lg-2">
  {{ userArr | customFilter : site : key : innerKey }}
</td>

app.filter("customFilter", function() {
    return function(userArr, site, key, innerKey) {
        // filter code
        // ...
        return result;
    };
})

In templates, filters are only executed when their inputs have changed. This is more performant than executing a filter on each $digest as is the case with expressions.

For more information, see

AngularJS Developer Guide - Creating Custom Filters

edited Nov 3, 2019 at 10:51

answered Nov 2, 2019 at 21:06

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Am Novice Over a year ago

getLogUserName doesn't trigger any API call, just a normal function which filters username and returns it.

Collectives™ on Stack Overflow

AngularJS function inside curly binding triggers for each click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related