CODEWITHSUNDEEP
htmlangularjs
anon
anon

Reputation:

HTML elements in Angular bindings expression

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 :)

Upvotes: 1

Views: 79

Answers (3)

K K
K K

Reputation: 18099

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

Upvotes: 0

V31
V31

Reputation: 7666

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>

Upvotes: 1

Donal
Donal

Reputation: 32713

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>

Upvotes: 2

Related Questions