如何在 AngularJS 和/或 AngularJS Material 中开发这种布局？

Question

我有以下代码：

div
    div Test1
    div(flex)
    div 12
    div(ng-show=“someCondition”, class="triangleLeft")

如果显示三角形，它将把12 推到左边。是否能够在不使用 AngularJS 和/或 AngularJS Material 将12 向左推的情况下隐藏/显示三角形？

这是我的Plunk :)

Answer 1

Here 是您的 plunk 的分叉版本

父div应该这样相对定位

position: relative;

triangle 或chevron 必须绝对定位，并且应该像这样放置在right: 0px 处

position: absolute;
right: 0px;

现在您可以看到三角形不会将文本 12 推到左侧。但是您可以看到它隐藏了文本。您可以向父 div 添加右/左填充，如下所示，这样看起来更好

 padding: 0 10px;