javascript - 动态更改输入字段的视觉顺序的简单方法(不更改表单 HTML)？

Question

我有一个特定的表单作为 Angular Directive(指令)模板。它包含几个按特定顺序排列的 INPUT 字段。我无法使用 ng-repeat 方法动态构建该表单，因为某些字段具有自定义行为、特殊验证器等。

 <div ID="1"> input field 1</div>
 ...
 <div ID="7"> input field 7</div>

然而，我需要在某些用例下以不同的随机顺序显示这些输入。表单的逻辑和内容保持不变，但只有一个曾经是第 7 位的输入应该变成第 1 位。如果我可以使用有条件地应用于某些元素的 CSS 类(可能使用 ng-class 选项)来实现它，那就太好了。

我可以使用什么 CSS 来保持相同的模板(如上所示)，但视觉上“div id=7”出现在“div id=1”之前？

我更喜欢避免 DOM 操作并采用 Angular 友好的方式。

Answer 1

flexbox 可以使用 order 属性更改元素的视觉顺序。

.wrap {
  display: flex;
  flex-direction: column;
}
.wrap div {
  padding: 1em;
  border: 1px solid black;
  margin-bottom: 1em;
}
#first {
  background: #bada55;
  font-weight: bold;
  order: 7
}
#last {
  background: #663399;
  color: white;
  font-weight: bold;
  order: 1
}

<div class="wrap">
  <div ID="first">I'm first in the source order but not visually</div>
  <div ID="last">I'm last in the source order but visually I'm first</div>
</div>

之后，可以通过 Javascript 添加随机性并通过循环分配顺序(我假设，我的 JS fu 基本上不存在)。