在按钮上点击插入并删除表达式

Question

我使用Kendo UI和Angular创建了一个热图。这是代码。

<div id="heatMapCell" data-value="{{params.compare ? h.percentChange : h.current[unit]}}"></div> 

，这是结果..
现在这里是热图的另一种变体。代码..

<div id="heatMapCell" data-value="{{params.compare ? h.percentChange : h.current[unit]}}"> 
    {{params.compare ? h.percentChange : h.current[unit]}} 
</div> 

这使得这样的.. 我所做的就是，插入data-value表达的div内。所以我想在这里实现的是引入一个按钮（#numberBtn），它显示“显示数字”，当用户点击它时，它会显示热图中的数字。同样，当用户再次点击该按钮时，数字将被删除。所以我的理解是，在按钮点击时，我需要插入{{params.compare ? h.percentChange : h.current[unit]}} /从div中删除。 我有这样一个按钮，点击功能..

$('#numberBtn').click(function() {   
    if ($(this).hasClass('active')) { 
     $(this).removeClass('active'); 
     $("#numberCells").remove(); //Remove expression here    
    } else { 
     $(this).addClass('active'); 
     $("#heatMapCell").append("<div id='numberCells'>{{params.compare ? h.percentChange : h.current[unit]}}</div>"); // Add expression here 
    } 
    $('#numberBtn').toggle(); 
}); 

此代码工作，并部分实现了我想要的东西。唯一的问题是表达式被呈现为字符串，而不是实际的数据。像这样...

所以我的问题是如何插入/删除表达式的div ..使用jQuery或JavaScript或Angular？我不确定，但我想，也许，我需要刷新/ setTimeout热图，所以它会以新的表达方式呈现。所以我的第二个问题是，如果我想刷新/重新加载div，我应该怎么做？欢迎提出建议。

Answer 1

我只是用CSS来做到这一点，所以你不必重新运行$ compile。

<div id="heatMapCell" data-value="{{params.compare ? h.percentChange : h.current[unit]}}"> 
    <span class="heat-map-number">{{params.compare ? h.percentChange : h.current[unit]}}</span> 
</div> 

然后，你可以添加/显示使用jQuery这些元素：

$('#numberBtn').click(function() {   
    if ($(this).hasClass('active')) { 
     $(this).removeClass('active'); 
     $(".heat-map-number").hide(); 
    } else { 
     $(this).addClass('active'); 
     $(".heat-map-number").show(); 
    } 
    $('#numberBtn').toggle(); 
}); 

---

添加，如果你想成为一个角度纯粹的，你也可以做到这一点与ngShow或ngHide和使用在按钮单击时切换的范围变量。