在按钮上单击angular2应用样式

Question

我的HTML如下，

.dropdown-menu
{
display :block;
}

点击上面的按钮，我想应用以下风格，

$(window).scroll(function() {
  var hT = $('.list').offset().top,
    hH = $('.list').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();
  console.log((hT - wH), wS);
  if (wS > hT + hH - wH && $("#searchModalForm").attr("displayed") === "false") {
    $('#searchModalForm').modal('show');
    $("#searchModalForm").attr("displayed", "true");
  }
});

Answer 1

基本上放置一个ng类并在按钮单击上设置变量值。

<div id="masonry">
  <figure>
    <figcaption>This girl</figcaption>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg">
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg">
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg">
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg">
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg">
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg">
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg">
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg">
  </figure>
  <figure>
</div>