jquery - 使用 AngularJS 动态滑动切换

Question

我对 AngularJS 还很陌生，我正在尝试将以下 jQuery 代码迁移到 AngularJS。

$('#someid').on('click', 'someclass', function() {
  $(this).next().slideToggle('fast');
});

我开始转换为 AngularJS 的 HTML 看起来像这样

<ul id='someid'>
  <li ng-repeat="...">
    <ul>
      <li class="someclass">{{ ... }}</li>
      <li style="display:none">the part that will be slideToggle'd</li> 
    </ul>
  </li>
</ul>

当用户与应用程序交互时，元素会动态添加到 ng-repeat 列表中，因此是 jQuery.on()。如果有帮助的话，我可以使用不稳定版本的 AngularJS。

我应该如何在 AngularJS 中重写 jQuery 片段？我现在尝试了一些事情，包括添加新指令、使用 ng-animate 等。但是当我将 jQuery 代码添加到我的 ng Controller 中时，它开始看起来很难看——我想避免任何混合。

非常感谢!

Answer 1

一种方法是编写指令，但理想情况下您应该将 ng-animate 与 ng-show 一起使用:

首先，在 ng-click 中切换一个属性，将其保留在“li”上，并带有“someclass”类:

<li class="someclass" ng-click="item.isVisible = !item.isVisible;">{{item.name}}</li>

然后在将要进行 SlideToggle 的部分上使用 ng-show 和 ng-animate。

<li ng-show="item.show" ng-animate="'animate'" style="display:none">the part that will be slideToggle'd</li>

您还需要编写动画 CSS 类才能使 ng-animate 工作。

希望这有帮助。