AngularJS:ng-show 与 display:none

2024-05-13

我有一个用例,我必须使用 CSS 默认隐藏 HTML 元素,如下所示:

HTML:

<div class="item">
</div>

CSS:

.item {
    display: none;
}

但是,我需要在页面加载后使用 ng-show 切换元素的可见性,如下所示:

<div class="item" ng-show="show_element">
</div>

但是,即使$scope.show_element设置为 true 时,该元素不会变得可见,即 css 属性会覆盖 AngularJS 的 ng-show。有什么办法可以让 ng-show 更加优先吗?

另外,你可能认为我可以保留$scope.show_element最初为 false 以隐藏它。但在这种情况下,当页面加载时,我只能短暂地看到该元素,从用户体验的角度来看,这并不好。


让它在你的情况下工作的一种方法是使用ng-class如果元素应该可见,您可以应用具有正确显示属性的类,即display: block如果你的引导速度很慢,你可以使用ng-cloak在这里查看文档https://docs.angularjs.org/api/ng/directive/ngCloak https://docs.angularjs.org/api/ng/directive/ngCloak

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS:ng-show 与 display:none 的相关文章

随机推荐

  • 自动铸造[关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我现在正在遭受脑放屁的痛苦 我以前曾经这样做过 但我不记得确切的语法 也无法查看我编写的代码 因为我当时在另一家公司工作 我有这样的安排 class
  • 谷歌表格根据今天的日期隐藏行

    在 Google Sheets 中 当 A 列中的日期等于或早于今天的日期时 我需要一个脚本来自动隐藏工作表 1 中的行 因此 如果今天是 2018 年 8 月 29 日 单元格 A3 中的日期是 2018 年 8 月 28 日 则第 3
  • 单元测试内存泄漏

    我有一个应用程序存在大量内存泄漏 例如 如果打开一个视图并关闭它 10 次 我的内存消耗会增加 因为视图没有完全清理 这些是我的内存泄漏 从测试驱动的角度来看 我想编写一个测试来证明我的泄漏 并 在修复泄漏之后 断言我修复了它 这样我的代码
  • php循环中的ajax在按钮单击时执行操作

    所以我有一个 php 循环 我使用 jquery 滑动切换来隐藏 显示带有 sql 结果的表 目前该表仅使用 php 加载 但由于发生了很多事情 导致了一些加载问题 我需要使用滑动切换 btn 来触发 ajax 因此它仅在按下按钮时请求当前
  • 24位整数

    为了检查一些银行帐号 我想对帐号进行模 97 但是很多帐号太大而无法输入 UInt64 如何对 24 位整数进行运算 Thanks 示例代码 无法转换 Convert ToUInt64 756842356987456214536254 97
  • 如何使用 ui-router 中的 ui-sref 将参数传递给控制器

    我需要传递和接收两个参数到我想要转换到的状态ui srefui router 的 例如使用下面的链接将状态转换为home with foo and bar参数 a Go to home state with foo and bar para
  • ICollection 和 IReadOnlyCollection 的扩展方法

    我想写一个扩展方法 例如 IsEmpty 对于 ICollection 和 IReadonlyCollection 接口 public static bool IsEmpty
  • Java 套接字 - 读和写

    问题 客户端没有收到任何消息 这是客户端和服务器的完整代码 CLIENT public class Client extends Socket public Client String hostName int port throws Un
  • 从 C# 调用非托管 dll。拿2

    我编写了一个 C 程序 它调用一个 C DLL 将命令行参数回显到文件中 当使用 rundll32 命令调用 c 时 它显示命令行参数没有问题 但是当从 c 内部调用它时 它不会显示 我问了这个问题 https stackoverflow
  • 加密 mongodb 中的密码字段

    我有以下代码 它插入userName and password进入数据库 但密码以纯文本格式存储 我的意思是 当我查看数据库时 我可以看到插入的密码 我想存储password in encrypted format MongoClient
  • 在启用滚动的情况下扩展堆栈视图内的 UITextView

    我正在尝试使用自动布局和 Stackview 来实现一些目标 我有一个垂直 Stackview 其中包含 UIView UITextView 和 UIView 如下所示 我已经在这里查看了以前的答案 但找不到一个干净的解决方案来实现此目的
  • 如何在React中处理多个路由器

    假设我们有一个网络应用程序 它通常有很多视图 例如索引页面 管理面板 帮助页面 联系人等 我在主index js 中使用react router dom 来处理它们 它工作得很好 但是现在我在开发管理面板时遇到了问题 它是 index js
  • WPF 和 WCF 应用程序的用户身份验证/授权的“最佳实践”是什么?

    假设我有一个 NET 富客户端 WPF 应用程序 它将同时部署在 3 个不同的场景中 客户端和服务器代码在单个进程中运行 客户端代码在 Intranet 计算机上运行 并通过 WCF 与运行应用程序 域 基础设施代码的服务器计算机进行通信
  • 对象映射器 - YAMLFactory - 由于缺少 _createContentReference 方法而出现异常

    我正在使用最新的 2 13 0 版本的 jackson 当我尝试解析 YAML 文件时 出现此异常 java lang NoSuchMethodError com fasterxml jackson core io ContentRefer
  • 在 UICollectionView 下面插入子视图

    当我在 UICollectionView 下方添加子视图时 有时子视图会显示在 UICollectionView 单元格上方 这是子视图插入代码 self collectionView insertSubview self garmentV
  • 有没有办法分析 WCF 应用程序的性能?

    我们正在尝试测量我们的系统的性能 该系统是一个使用 WCF 调用的 NET 3 5 应用程序 问题是到目前为止 我们无法分析这些调用中的方法 编写了一个 winforms 客户端应用程序来测试我们的系统 我们尝试使用ANTS 4 Profi
  • 如何在 Grails Geb/Spock 测试用例中获取 sessionFactory?

    我想我需要在 GebSpec 测试中刷新 hibernate 会话 所以我想获取 sessionFactory 看起来应该被注入 但是当我做这样的事情时 class MySpec extends GebSpec def sessionFac
  • Flask-Mail - 基于 Flask-Cookiecutter 异步发送电子邮件

    我的烧瓶项目基于烧瓶饼干切割机 https github com sloria cookiecutter flask我需要异步发送电子邮件 发送电子邮件的功能由以下配置米格尔的教程 https blog miguelgrinberg com
  • Puppeteer 无法在 VPS (DigitalOcean) 上工作

    我在水滴中数字海洋 https www digitalocean com 我收到这个错误 node 5549 UnhandledPromiseRejectionWarning TimeoutError Navigation Timeout
  • AngularJS:ng-show 与 display:none

    我有一个用例 我必须使用 CSS 默认隐藏 HTML 元素 如下所示 HTML div class item div CSS item display none 但是 我需要在页面加载后使用 ng show 切换元素的可见性 如下所示 di