how do you add html elements into an angular expression?

Question

I have this in an HTML table:

<td><strong>{{item.title ? item.title : "<p style='color: grey'>select this item to edit</p>"}}</strong></td>

Unfortunately this does not have the effect that I thought it would.

It seems like the '<' bracket breaks the angular binding to the data.

I'm not sure how I should make this expression work.. any help would be appreciated.

rupampatel · Accepted Answer · 2016-04-18 19:56:38Z

2

use ngBindHtml

official guide: ngBindHtml

answered Apr 18, 2016 at 19:56

rupampatel

3002 silver badges11 bronze badges

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

1 Comment

razblack Over a year ago

I'll need to look at this more carefully.. it is probably the recommended way; however, I have a data model service in use and this particular area is presented via a modal controller. I move the object around using the service so attaching objects to it in the modal scope may work for this.

akaphenom · Accepted Answer · 2016-04-18 20:01:00Z

1

I would approach it differently

<td>
    <strong ng-show="item.title">{{item.title}}</strong>
    <strong ng-show="!item.title"><p style='color: grey'>select this item to edit</p></strong>

</td>

Something along those lines. The angular way (at least to my understanding) isn't about manipulating and transforming strings into DOM elements.

edited Apr 18, 2016 at 20:01

answered Apr 18, 2016 at 19:55

akaphenom

6,89611 gold badges62 silver badges112 bronze badges

4 Comments

razblack Over a year ago

this is simple and easy to implement versus using ngBindHtml.. i just tested and does the job.

akaphenom Over a year ago

sure I get that you can use it (ngBind). I don't love it (ngBind), as the HTML generation is now relegated to a controller somewhere, and not with the rest of the HTML.

razblack Over a year ago

I should probably have described the problem in more detail so you could elaborate on your answer @akaphenom.. my apologies. I have some nested controllers in my use case some of which are modal controllers, and I'm having to use a viewmodel data service i wrote to pass the objects cleanly between the scopes. I'm still learning angular, but starting to get the hang of it, ... this just seemed like a very simple way around dealing with it.. for my use case atleast.

akaphenom Over a year ago

I am sorry, I edited my comments - as they were not clear (i am rushing out), but at this point I should clarify. I don't like the ngBind solution as it separates where the HTML is generated from the remainder of the HTML. In the solution I provided the HTML remains in one place - and which HTML to display is controlled via a flag. It makes the HTML easier to maintain. Note: there are other constructs like ng-if ng-switch that act similarly (HTML in one place) through different features/implementations, but show should be fine here...

Collectives™ on Stack Overflow

how do you add html elements into an angular expression?

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related