Question

我有一个作为角度指令模板的形式。它按特定顺序包含几个INPUT字段。我无法使用ng-repeat方法动态构造该表单，因为某些字段具有自定义行为，特殊验证器等。

RequestStartup

但是我需要在某些用例下以不同的随机顺序显示这些输入。形式的逻辑和内容保持不变，但过去只有一个输入应该是第一个。如果我可以使用有条理地应用于某些元素的CSS类（可能使用ng-class选项）来实现它，那将会很棒。

我可以使用什么CSS来保持相同的模板（上面勾画）但在“div id = 1”之前显示“div id = 7”？

我更喜欢避免使用DOM操作，并且采用角度友好的方式。

Answer 1

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

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

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

Answer 2

由于div元素是块元素，因此每个div都会出现在它的行上，因此只有CSS才能在第一个之前显示第二个。

但是，如果您将此div样式设置为display:inline;或display:inline-block;，例如宽度，那么您将可以使用float:right; float:left;来更改顺序

我也谷歌"change order of html elements by css"，它也给了我一些其他的想法。

在stackoverflow上也有一些答案，就像这个one

一样

动态更改输入字段的可视顺序的简单方法（不更改表单HTML）？

2 个答案: