Блог

Я создал тепловую карту, используя 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? Я не уверен, но я думаю, может быть, мне нужно обновить / установить тайм-аут тепловой карты, чтобы она отображалась с новым добавленным выражением. Итак, мой второй вопрос, если бы я хотел обновить / перезагрузить только div, как мне это сделать? Предложения приветствуются.

Я бы просто сделал это с помощью 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();
});
  

Добавим, что если вы хотите быть пуристом angular, вы также можете сделать это с помощью ngShow или ngHide и с помощью переменной области видимости, которая переключается при нажатии кнопки.