2017-04-20 137 views
2

這可能很愚蠢,但我無法弄清楚。使用引號將變量添加到字符串中

我建立一個字符串在javascript

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

現在工作得很好,但說我想用ng-class與這個div。

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

現在,我逃離字符串來放置我的類名,打開字符串。

我該如何正確傳遞它,以便它在DOM中正確呈現?

+0

您可以在項目中查看是否適合使用[template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals)。 – Marty

+0

「open」是一個變量,它的值應該被替換爲字符串嗎? – Barmar

+0

不,打開應該完全讀取'開放' – user7366018

回答

2

使用字符串連接。

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

您可以使用模板文字

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

如果navCollapsed是一個變量標識符

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

我覺得你的第二個解決方案是最接近的。不過,我需要能夠通過稍後單擊按鈕來切換navCollapsed在true和false之間。該解決方案設置了不確定的值。 – user7366018

+0

@ user7366018不確定你的意思?您可以隨時更改'navCollapse'的屬性和值 – guest271314

+0

它發送給dom:'ng-class =「{」open「:false}」' – user7366018

0

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

這是如何解決的。