Dynamically add html content with binding in angularjs

Question

I have an Input like this:

<input type="text" ng-model="name">

and a list which is placed on the scope:

$scope.list = ["<span>{{name}}</span>","<span>{{name2}}</span>"]

I am trying to run over the list using ng-repeat and display all the list element and have a binding between the input and the span content.

<div ng-repeat="item in list" ng-bind-html-unsafe="item">
                    <span>{{$index + 1}}.</span>
                    <span ng-bind-html="to_trusted(item)"></span>
                </div>

Where:

$scope.to_trusted = function(html_code) {
        return $sce.trustAsHtml(html_code);
    }

What is the right way to do so? Thanks.

What is the actual problem? I'm guessing you're seeing {{name}} instead of the value of name? — New Dev
– New Dev, Commented Oct 24, 2014 at 6:03
Please have a look at this plunker: plnkr.co/edit/GqODeogbXemimTZ9nurY?p=preview — Bergerova
– Bergerova, Commented Oct 25, 2014 at 21:18
yeaa, you added plain html without applying directive that's why brackets — Kostia Mololkin
– Kostia Mololkin, Commented Oct 26, 2014 at 9:48

Kostia Mololkin · Accepted Answer · 2014-10-26 10:21:52Z

2

if you can avoid to using ng-bind-html, you better use ng-include for templating, here working plunk.
Like here:

html

<div ng-repeat="item in list" >
         ...//other things
        <span ng-include="'t1'"  ></span>
    </div>

template

<script id="t1" type="text/ng-template">
      <span>{{item.name}}</span>
    </script>

controller

$scope.list = [
      {name:"name1"},
      {name:"name2"},
      {name:"name3"}
      ];

edited Oct 26, 2014 at 10:21

answered Oct 26, 2014 at 10:06

Kostia Mololkin

72610 silver badges25 bronze badges

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

4 Comments

Bergerova Over a year ago

It's the same as the one I posted yesterday

Bergerova Over a year ago

Thanks! But can I dynamically add a template? Cause I have a lot of templates and it will be a shame to load all of them while I will eventually need only one or two?

Bergerova Over a year ago

How come this Plunker doesn't work? plnkr.co/edit/GqODeogbXemimTZ9nurY?p=preview

Kostia Mololkin Over a year ago

if you need the dynamic template,y can do that using compile,that the reason why your plunk is not working,i will set up plunk with example a little bit later

Collectives™ on Stack Overflow

Dynamically add html content with binding in angularjs

1 Answer 1

html

template

controller

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

html

template

controller

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related