在按钮上单击

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();
});

此代码正在运行，部分实现了我想要的功能。唯一的问题是表达式是以字符串形式呈现，而不是实际数据。像这样......

所以我的问题是如何使用jquery或javascript或Angular将表达式插入/删除到div中？我不确定，但我想，也许，我需要刷新/ 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并使用在按钮点击时切换的范围变量来执行此操作。