CODEWITHSUNDEEP
javascripthtmlangularjs
Rahul
Rahul

Reputation: 450

Concat scope in angular template

I have three text boxes having scopes variable are borderColor(like #000000),borderWidth(like 3px),borderStyle(like solid).I want to bind a div border if changes occur in one of these textboxes.I am using Angular. This is what I did so far:

<div ng-style="{'border' : borderWidth+'px'+borderStyle+borderColor}">
This is my firtst div </div>

Basically, this is what I exactly want:

<div ng-style="{'border' : '3px solid #000000'}">
This is my firtst div </div>

Any suggestion?

Upvotes: 2

Views: 273

Answers (1)

karaxuna
karaxuna

Reputation: 26940

You have no space between properties, try:

<div ng-style="{'border' : borderWidth+'px '+borderStyle+' '+borderColor}">

And one more. You have described "borderWidth(like 3px)" don't add extra px if it's already string like 3px. Add px if it's 3. Just a note to prevent 3pxpx.

Upvotes: 1

Related Questions