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

标签 javascript angularjs

给定一个有两个元素的场景,其中第一个元素仅在满足特定条件 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;
}

笨蛋here .

提前致谢!

最佳答案

您也可以尝试使用 ng-style ,例如:

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

关于javascript - AngularJS ng-if 具有固定元素位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30915428/

相关文章:

javascript - Bootstrap 模态内的水平滚动

javascript - JavaScript 中的 FizzBu​​zz 示例

javascript - 在angularJS中绑定(bind)服务数据

javascript - Angular中的$routeProvider在未定义中找不到

javascript - 有没有什么方法可以在不使用 jQuery 的情况下在 Angular 所见即所得指令中使用 colorPicker

javascript - 有人可以帮我找到带有链接的 ng-contents 的定位器吗?

javascript - 关闭/打开模式时更新字符计数

angularjs - Angular 和 $cookies - $cookies.get 不是函数

javascript - AngularJs $scope 在对工厂发出 GET 请求后不更新

javascript - process.nextTick 的常见方法