0

Is there a way around the following in Angular:

<span>Delete {{ vm.name ? '<strong>' + vm.name + '</strong> : 'this user'}}?</span>

If the vm.name exists, I want to wrap the name in <strong> tags, if it doesn't I want to display this user without <strong> tags?

Is this possible?

Any help is appreciated. Thanks in advance!

2
  • can you use styles? or you need the <strong> tag Commented Feb 24, 2016 at 16:57
  • I would prefer to use the <strong> tag, yes. Commented Feb 24, 2016 at 16:58

3 Answers 3

1

Try this:

<span>Delete <strong ng-if="vm.name">{{vm.name}}</strong><span ng-if="!vm.name">this user</span></span>
Sign up to request clarification or add additional context in comments.

Comments

1

There's a few ways to accomplish this:

ng-if

<span>
    Delete <strong ng-if="vm.name">vm.name</strong><span ng-if="!vm.name">this user</span>?
</span>

This will show <strong ng-if="vm.name">vm.name</strong> if vm.name exists, and <span ng-if="!vm.name">this user</span> if they do not.

conditional classes

<style>
   .bold {
        font-weight: bold;
    }
</style>

<span>
    Delete <span ng-class="{bold: vm.name}">{{ vm.name ? vm.name : 'this user'}}</span>?
</span>

This will conditionally add the class bold to your span. You need to add your own CSS to that class (unless it exists already).

There's also something you can do with ng-bind-html, but it's a bit of a pain and I wouldn't recommend it.

Comments

0

There could be different ways to achieve this.

Option 1

<span > Delete <strong>{{asset.Name}} </strong> <span ng-if=asset.Name.length==0> this user</span></span>

option 2

<span ng-if="asset.Name==0">  Delete  this user</span>
<span ng-if="asset.Name.length>0"> Delete <strong>{{asset.Name}} </strong>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.