Concatenate object value to the string variable in html template

Question

I'd stuck at a point while working with ng directives. I'm passing two parameters to mouseoverOnStep function, one is object value itself and second one is the selector of the element. I've the following HTML code

<li ng-mouseover="mouseoverOnStep(Color.color_value, '.mask-second-{{Color.id}}');" ng-repeat="Color in select.Color">&nbsp;</li>

What I am getting the output when I inspected my element. It is

<li ng-repeat="Color in select.Color" ng-mouseover="mouseoverOnStep(Color.color_value, '.mask-second-');" class="ng-scope">&nbsp;</li>

With

Error: [$parse:syntax]

Why I am not getting the value of {{Color.id}} in DOM ? I am expecting something like.

ng-mouseover="mouseoverOnStep(Color.color_value, '.mask-second-12');"
ng-mouseover="mouseoverOnStep(Color.color_value, '.mask-second-13');"

Any help would be appreciated.

You don't put a brace expression in the function, it is already accepting an angular expression. so change it to pass in the Color.id and in the function concatenate it with '.mask-second-' — Callum Linington
– Callum Linington, Commented Jul 10, 2015 at 7:33

Callum Linington · Accepted Answer · 2015-07-10 07:53:51Z

2

This is already an angular expression:

ng-mouseover="mouseoverOnStep(Color.color_value, '.mask-second-{{Color.id}}');"

Putting {{ }} into javascript isn't valid.

You have 2 options:

ng-mouseover="mouseoverOnStep(Color.color_value, '.mask-second-'+ Color.id);"

This won't evaluate and show the value of Color.id, and why should it? it is the same as writing this function in JavaScript:

function showMeId(value) { console.log(value); }

showMeId('.mask-second-' + Color.id); // in javascript you will never see that evaluated.

-- OR --

ng-mouseover="mouseoverOnStep(Color);"

your mouseoverOnStep:

function mouseoverOnStep(color) {
    var cssClass = '.mask-second-' + Color.id;
}

I think you're getting confused with what is JavaScript and what is HTML and what gets evaluated.

edited Jul 10, 2015 at 7:53

answered Jul 10, 2015 at 7:35

Callum Linington

14.4k14 gold badges80 silver badges156 bronze badges

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

2 Comments

Vineet Over a year ago

Pardon your first answer did not work for me. It is giving the output ng-mouseover="mouseoverOnStep(Color.color_value, '.mask-second-'+ Color.id);" instead ng-mouseover="mouseoverOnStep(Color.color_value, '.mask-second-12');". For your second answer I will only have to go with that. I was trying to make a global function so you can call this from everywhere (Views)..

Callum Linington Over a year ago

It won't replace the value, it hasn't been executed by javascript... I'm not sure what you're asking....

Collectives™ on Stack Overflow

Concatenate object value to the string variable in html template

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related