Add a variable with quotes to string in Javascript

Question

This is probably stupid simple, but I can't figure it out.

I am building a string in javascript

var template = '<div class="big-long-string-here">';

Now that works fine, but say I wanted to use ng-class with this div.

var template = '<div class="big-long-string-here" ng-class="{'open' : navCollapsed}">

Now, I'm escaping the string to place my class name, open in the string.

How would I pass this properly so it's rendered correctly in the DOM?

You could review whether it's appropriate to use template literals in your project. — Marty
– Marty, Commented Apr 20, 2017 at 23:05
Is open a variable whose value is supposed to be substituted into the string? — Barmar
– Barmar, Commented Apr 20, 2017 at 23:05

Barmar · Accepted Answer · 2017-04-20 23:04:40Z

2

Use string concatenation.

var template = '<div class="big-long-string-here" ng-class="{' + open + ' : navCollapsed}">

answered Apr 20, 2017 at 23:04

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

Comments

guest271314 · Accepted Answer · 2017-04-20 23:06:37Z

0

You can use template literal

var template = `<div class="big-long-string-here" ng-class='{"open" : "navCollapsed"}'>`;

If navCollapsed is a variable identifier

var template = `<div class="big-long-string-here" ng-class='{"open" : ${navCollapsed}}'>`;

answered Apr 20, 2017 at 23:06

guest271314

1

7 Comments

user7366018 Over a year ago

I feel like your second solution is closest. However I need to be able to toggle the navCollapsed between true and false by clicking a button later on. That solution sets an indefinite value.

guest271314 Over a year ago

@user7366018 Not sure what you mean? You can change the attribute and the value of navCollapse at any time

user7366018 Over a year ago

It's sending this to the dom: ng-class="{"open" : false}"

guest271314 Over a year ago

That is not valid html for an attribute. If single quotes are used to surround value of attribute double quotes can be used inside of .value of attribute. Double quotes should not appear within double quotes of attribute value. What do you mean by "That solution sets an indefinite value"?

user7366018 Over a year ago

Once it's set to false, it can't be changed.

|

Kirill A · Accepted Answer · 2017-12-19 16:41:37Z

0

$templateCache.put('udt-toolbar.html', '<div ng-class="{{datatable.config.name ? \'your-class\' : \' \'}}" name="udt-toolbar" class="button-toolbar-main clearfix"></div>');

This is how can be resolved.

answered Dec 19, 2017 at 16:41

Kirill A

5175 silver badges13 bronze badges

Collectives™ on Stack Overflow

Add a variable with quotes to string in Javascript

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related