javascript - 如果在AngularJS中不是ngRepeat，如何在DOM中订购项目？

我有一个包含2个不同controller的controllers：一个users和classes模型。

我希望它们按照打开的时间顺序保持在顶部（例如，如果您先打开Users然后Classes，即使在html模板中，Classes也应显示在Users上方， Users部分首先出现）。这是一个JSBin：

http://jsbin.com/IQUDEdI/10/edit

当您单击复选框以打开一个部分时，会将其unshift更改为array $scope.openSections。我意识到，除非在ngFilter内，否则ngRepeat不起作用（对吗？）。

如果没有内置的方法（我在看ngSwitch，但是看起来不像我想要的），我将在section上创建（或修改）一条指令，该指令将做一个$(body).prepend(element)之类的东西，尽管我不确定这是否100％有效。

有人知道这样做的最佳方法吗？

提前致谢

最佳答案

这是一个非常好的问题。

基本上，我们需要一个指令，该指令可以显示，隐藏和排列每次更改的部分列表。
我们的指令必须“知道”它包含的所有部分以便对其进行排序。

哦，有这样一条指令：ngRepeat，但是我们如何为它提供节列表？
如果这些“节”只是DOM nodes，则无法将它们传递到ngRepeat。

因此，我试图创建一个指令（容器），该指令收集所有DOM NODES，观察该收集并进行更改排序，显示或隐藏相关部分。
但是对DOM nodes的这种操作确实很痛苦，我觉得这是错误的方法。

然后我看到了光！

只需使用ngInclude声明模板来重构标记。
然后使用ngRepeat迭代这些模板，非常好。

现在这是一个巨大的胜利：


无需自定义指令。
ngRepeat / ngInclude好东西的所有好处
无需在每个部分上设置不同的手表，ngRepeat会照顾好它。
简单明了！


这是一个plunker：

声明模板：

<script type="text/ng-template" id="users.section">
  <div ng-controller='usersviewer'>
    <legend>Users</legend>
    <li ng-repeat='user in users'>{{user.name}}</li>
  </div>
</script>

<script type="text/ng-template" id="classes.section">
  <div ng-controller='classesviewer'>
    <legend>Classes</legend>
    <li ng-repeat="class in classes">{{class}}</li>
  </div>
</script>

使用ngRepeat做所有的“魔术”：

<div class='section' ng-repeat="include in openSections" ng-include="include + '.section'">
</div>

奖励-重构CSS以匹配ngInclude动画：

.section {
  background:darkgray;
  color:white;

  /* Default fully visible value */
  opacity: 1;
  height: 100px;
  overflow:hidden;
}

.section.ng-leave {
  /* Declare transitions */
  display:block !important;
  transition: all 0.2s;

  /* Value when fully visible */
  opacity: 1;
  height: 100px;
}

.section.ng-leave-active {
  /* Value when invisible */
  opacity: 0;
  height: 0px;
}

.section.ng-enter {
  /* Declare transitions */
  transition: all 0.2s;
  display:block !important;

  /* Value when invisible */
  opacity: 0;
  height:0px;
}

.section.ng-enter-active {
  /* Value when fully visible */
  opacity: 1;
  height: 100px;
}

关于javascript - 如果在AngularJS中不是ngRepeat，如何在DOM中订购项目？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21253620/