Call an AngularJS function inside HTML

Question

I was trying to see if there is a way to call a function I designed inside the scope:

<ul class="ui-listview ui-radiobutton" ng-repeat="meter in meters">
    <li class = "ui-divider">
        {{meter.DESCRIPTION}}
        {{htmlgeneration}}
    </li>
</ul>

$scope.htmlgeneration = function()
{
    ...
}

The function is called htmlgeneration. Essentially, what I want to do is dynamically append HTML inside the li element while using AngularJS.

While calling a function from HTmL like @SomeKittens said , Your function will be called more than once . Why ? Answer is Here . So be careful when calling function from HTML . It may slowdown the loading of your page . — Md. Shohag Mia
– Md. Shohag Mia, Commented Feb 7, 2019 at 8:45

SomeKittens · Accepted Answer · 2014-03-28 21:31:19Z

62

Yep, just add parenthesis (calling the function). Make sure the function is in scope and actually returns something.

<ul class="ui-listview ui-radiobutton" ng-repeat="meter in meters">
  <li class = "ui-divider">
    {{ meter.DESCRIPTION }}
    {{ htmlgeneration() }}
  </li>
</ul>

answered Mar 28, 2014 at 21:31

SomeKittens

39.6k19 gold badges117 silver badges145 bronze badges

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

2 Comments

serge Over a year ago

is there a way to do it using parameters?

SomeKittens Over a year ago

@Serge Yes, pass the parameters to the function as normal.

Akaisteph7 · Accepted Answer · 2023-02-22 00:45:21Z

0

I guess my problem was related to conflicts with Django tags. This post was helpful.

What worked for me was a simple solution involving using ng-bind and changing the code to something like this:

<ul class="ui-listview ui-radiobutton" ng-repeat="meter in meters">
  <li class="ui-divider" ng-bind="htmlgeneration(meter.DESCRIPTION)">
  </li>
</ul>

answered Feb 22, 2023 at 0:45

Akaisteph7

6,9222 gold badges38 silver badges53 bronze badges

Collectives™ on Stack Overflow

Call an AngularJS function inside HTML

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related