Question

给定具有两个元素的场景，其中第一个元素仅在满足特定条件ng-if时显示，则第二个元素将根据第一个元素是否存在而向上或向下移动。

<body ng-app="ngAnimate">
  <label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label>
  <p ng-if="checked" class="variable">Variable Element</p>
  <br/>
  <p class="fixed">Fixed Element</p>
</body>

在固定位置显示第二个元素的最佳方法是什么，没有它取决于第一个元素的存在？或者甚至更好，留出足够的空间来显示第一个元素何时可见？

我到目前为止尝试过的是通过CSS设置第二个元素的位置。它有效，但很可能不是最好的解决方案。

.fixed {
  position: absolute;
  top: 100px;
  border:1px solid green;
  padding:10px;
}

Plunker here。

提前致谢！

Answer 1

您也可以尝试使用ng-style，例如：

<p class="fixed" ng-style="{top: checked ? '100px' : '20px'}">Fixed Element</p>

Answer 2

而不是.featured_product { position: relative; } .featured_product .image { height: 200px; margin-bottom: 20px; } .featured_product .get_quote_wrap { display: block; width: 100%; box-sizing: border-box; position: absolute; bottom: 30px; left: 0; text-align: center; }，将ng-if与样式化的visibility: hidden或普通ng-class指令结合使用。

可见性CSS属性保留为显示元素分配的任何空间，这似乎比绝对定位更适合您的用例。

此处：http://plnkr.co/edit/m7FI3BjHJWKbUzSDfjlp?p=preview。

Answer 3

使用ng-class根据checked是true还是false来设置段落的类。

<p ng-class="{checked : 'fixed'}">Fixed Element</p>

AngularJS ng-if具有固定元素位置

3 个答案: