HTML elements in Angular bindings expression

Question

Is that possible to insert HTML elements in an Angular expression ? Let's take a few example.

I would like to do something like this:

<table>
    <tr ng-repeat="employee in employees">
        <td>{{employee.firstname ? employee.firstname : '<p style="color:red">No name</p>'}}</td>
        <td>{{employee.job}}</td>
    </tr>
</table>

In our controller, we have:

$scope.employees = [{firstname:'Bob', job:'Developer'},
                    {firstname:'Paul', job:'Manager'},
                    {job:'Developer'}]

We show all employees (name/job), when we don't have the name of the person, we show No name.

Thanks :)

Donal · Accepted Answer · 2015-06-22 09:04:37Z

2

You could use ng-show, it will show the paragraph if employee.firstname is null.

<tr ng-repeat="employee in employees">
    <td>{{employee.firstname }}<p ng-show="!employee.firstname" style="color:red">No name</p></td>
    <td>{{employee.job}}</td>
</tr>

answered Jun 22, 2015 at 9:04

Donal

33.2k10 gold badges69 silver badges75 bronze badges

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

Comments

V31 · Accepted Answer · 2015-06-22 09:08:42Z

1

You can simply use ng-if in this case

<tr ng-repeat="employee in employees">
    <td ng-if="employee.firstname">{{employee.firstname}}</td>
    <td ng-if="!employee.firstname"><p style="color:red">No name</p></td>
    <td>{{employee.job}}</td>
</tr>

edited Jun 22, 2015 at 9:08

answered Jun 22, 2015 at 9:03

V31

7,6643 gold badges28 silver badges44 bronze badges

2 Comments

anon Over a year ago

Maybe this could be better ?

<tr ng-repeat="employee in employees">         <td ng-if="employee.firstname">{{employee.firstname}}           <p style="color:red" ng-if="!employee.firstname">No name</p>         </td>         <td>{{employee.job}}</td> </tr>

V31 Over a year ago

@Mistalis: IMHO ng-if in this scenario is more apt as you need to check the condition only once. So if firstname is not there then DOM elements wont increase

K K · Accepted Answer · 2015-06-22 09:12:18Z

0

You can use ng-bind in this case

<tr ng-repeat="employee in employees" ng-bind="functionName(argument);"></tr>

And in the controller, you can put your logic inside the functionName() function.

$scope.functionName(){
  //Your logic goes here
}

Based on your condition, return the relevant html

answered Jun 22, 2015 at 9:12

K K

18.2k4 gold badges33 silver badges39 bronze badges

Collectives™ on Stack Overflow

HTML elements in Angular bindings expression

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related