bind multiple values using ng-bind

Question

Can I bind multiple values using ng-bind like so :

<p ng-bind="instructor.first_name instructor.last_name"></p>

Whenever I try this I get the following error:

Error: $parse:syntax Syntax Error

I know I can do the same using the curly braces

<p>{{instructor.first_name}}{{instructor.last_name}}</p>

but I would like to avoid this if I can since the rest of the code base uses ng-bind and I would to stay consistent. Thanks.

[Docs say no](https://docs.angularjs.org/api/ng/directive/ngBind) — Sterling Archer, Jun 23 '15 at 16:35
Haven't tried this, but I think you have to treat `ng-bind` values as expressions; so try `instructor.first_name + " " + instructor.last_name` — Andrew Burgess, Jun 23 '15 at 16:37
No it doesn't but I am just going to reformat the html a bit more with `span` tags inside the `p` tag and use ng-bind on each of those. Thanks — Chad Watkins, Jun 23 '15 at 16:41
@ChadWatkins Here's an example of it working: http://plnkr.co/edit/ls0AkKUpY7z0xNeY0xB3?p=preview — Andrew Burgess, Jun 23 '15 at 16:55
@AndrewBurgess Awesome, thank you. I had double quotes on the outside and I think that stopped it from working. — Chad Watkins, Jun 23 '15 at 17:05

score 34 · Accepted Answer · answered Nov 24 '15 at 11:45

You can use "+" for concatenation of the expressions. The following should work for you: <p ng-bind="(instructor.first_name) + (instructor.last_name)"></p>. You can even add filters there <p ng-bind="(instructor.first_name | filterName) + (instructor.last_name)"></p>.

score 7 · Answer 2 · answered Apr 18 '16 at 12:57

You can always use ng-bind-template to bind and format multiple expressions. This is somewhat of a combination of your ng-bind and curly braces, but I think it's what you are looking for.

Your example would be:

<p ng-bind-template="{{instructor.first_name}} {{instructor.last_name}}"></p>

And of course there is also a ng-bind-html if you are looking to bind an html string.

score 2 · Answer 3 · answered Feb 12 '18 at 12:03

2

Following the same idea of past answers you can also use ng-bind-html if you want to concat any other chars, that was my case:

  <td ng-bind-html="( com.ref.number | highlight: searchTerm) + '-' + (com.ref.order)">
  </td>

answered Feb 12 '18 at 12:03

Juan Garassino

61
7

bind multiple values using ng-bind

3 Answers3