ngClass指令：我是否使用多個表達式來添加多個類？

這裏是實現ngClass指令：我是否使用多個表達式來添加多個類？

data-ng-class="{ 'tooltip_show' : showTooltip , 'tooltip__' + brand.settings.name }"

的我想要的一個例子，但它不工作！有人可以幫忙嗎？

來源

2017-07-14 madyar13

爲什麼有一個NG-類 'tooltip_show' 內的兩個值？ – Vivz

我需要一個依賴於showTooltip的類，而另一個依賴於此變量brand.settings.name。我能以另一種方式做到這一點嗎？ – madyar13

正如@harriyot所述。這應該足夠了{'tooltip_show'：showTooltip，'tooltip__'+ brand.settings.name：tooltipText} – Vivz

使用數組形式ng-class：

<div ng-class="[showTooltip ? 'tooltip_show' : '', 
       'tooltip__' + brand.settings.name]"> 
<div>

或計算類的JavaScript：

<div ng-class="computeClass(tooltip_show, brand.setting.name)"> 
</div>

$scope.computeClass(show, name) { 
    var obj = {}; 
    obj.showTooltip = show; 
    obj['tooltip_'+name] = true; 
    return obj; 
};

後一種方法更容易調試和複雜的計算更好。

參見，

來源

2017-07-14 14:30:22 georgeawg

是的，這是我認爲你可以做的@стасПилипко，很好的答案georgeawg：+1： –

謝謝！有用！ – madyar13

看起來您沒有爲第二項設置值。你的意思是這樣

{ 'tooltip_show' : showTooltip , 'tooltip__' + brand.settings.name : tooltipText }

或

{ 'tooltip_show' : showTooltip , 'tooltip__' : brand.settings.name }

？

來源

2017-07-14 13:19:41 harriyott

'tooltip__'+ brand.settings.name - 當我只寫這部分時，我收到類似這樣的類=「tooltip__class」。 brand.settings.name - 它是可變的，取決於頁面。 – madyar13

http://jsbin.com/genaqapefe/edit?html,js,output

data-ng-class="{ 'tooltip_show': showToolTip, {{ 'tooltip_' + brand.settings.name }}: true }"

這是在這個倉爲我工作。如果沒有大括號，我無法評估它，但不知道這是否是最佳做法。

來源

2017-07-14 14:17:15 kauffee000

@стасПилипко還是你想讓它始終顯示？您可以使用一個類，如：'class =「{{'tooltip_'+ brand.settings.name}}」data-ng-class =「{'tooltip_show'：showToolTip}」' – kauffee000

請參閱[AngularJS開發人員指南 - 爲什麼混合插值和表達式是不好的做法]（https://docs.angularjs.org/guide/interpolation#embedding-interpolation-markup-inside-expressions） – georgeawg

你不應該在'class'屬性的值中使用插值，當在同一個元素上使用'ngClass'指令時。請參閱[AngularJS ng-class指令參考 - 已知問題]（https://docs.angularjs.org/api/ng/directive/ngClass#known-issues）。 – georgeawg

ngClass指令：我是否使用多個表達式來添加多個類？

回答

相關問題