Angularjs 切换 div 可见性

2024-06-24

我试图通过单击按钮来切换 div 文本。我尝试采用范围变量并根据该变量切换类名。我在哪里犯了错误here http://jsfiddle.net/nw5ndzrt/340/

<button ng-click="toggle()">test</button>
<div ng-class="{{state}}">
  hello test
</div>
function ctrl($scope) {
  $scope.state = vis;
  $scope.toggle = function() {
    state = !state;
  };
}
.vis {
  display: none;
}

你可以像这样简化很多

<button ng-click="showDiv = !showDiv">test </button>
<div ng-show="showDiv" >
    hello test
</div>

小提琴示例 http://jsfiddle.net/HB7LU/17957/

除非您需要切换特定的 ng-class,在这种情况下您可以执行类似的操作

<button ng-click="showDiv = !showDiv">test </button>
<div ng-class="{'vis' : showDiv }" >
    hello test
</div>

小提琴示例 http://jsfiddle.net/HB7LU/17961/

(只需确保您使用的是较新版本的 Angular 即可)

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

Angularjs 切换 div 可见性 的相关文章

  • 如何在 dash/plotly 中使用 iframe? (Python/HTML)

    我正在创建一个仪表板 我想使用这个交互式地图 网站链接 https www ons gov uk peoplepopulationandcommunity healthandsocialcare causesofdeath articles
  • 同心放射圆 d3

    我有一个等距值的数组 我用它来绘制同心圆 我想使用一种散发效果 本质上是 一旦最外面的圆的值超过最大值 就将其删除 并在中心添加一个新的圆来补偿 我不确定如何操作数据集来删除和添加新圆圈
  • 为什么视口宽度与实际显示宽度不匹配?

    Chrome 显示我的视口宽度为 1280px 然而 我的实际显示分辨率是2560x1600px 我使用的机器是13 3英寸的MacBook Pro 为什么视口不是 2560px 宽 使用没有任何区别 my display settings
  • Javascript CORS 图像/画布操作

    我正在尝试从另一个已配置为允许 CORS 的域检索图像 并操纵像素 然后我想显示结果并能够操纵结果 我可以在我请求的图像上使用 getImageData 和 toDataURL 所以我知道服务器部分可以工作 但是 当我尝试将图像的 src
  • 滚动条宽度:细在 Firefox 中不起作用

    我刚刚在 Firefox 67 中实现了新的 css 滚动条颜色和滚动条宽度 滚动条宽度不起作用 无论我将其设置为自动 细化还是无 它都会显示相同的宽度 我想要它薄 但它不薄 我是这样实现的 root scrollbar color rgb
  • GraphQL 错误字段类型必须是输入类型,但得到:

    这是突变 const createNotebook mutationWithClientMutationId name CreateNotebook inputFields token type GraphQLString details
  • 重复 Pinterest Facebook 邀请功能

    I m trying to duplicate Pinterest s Invite Friends functionality In case you haven t seen what it looks like it looks li
  • 如何在传单地图上显示热图

    我想在我的传单地图上显示热图 我使用了 heatmap jshttps github com pa7 heatmap js https github com pa7 heatmap js但它最终只是显示 未捕获的类型错误 无法分配给只读属性
  • mat-table 自动调整列宽以适应更大的内容

    我有一个垫表 我想自动调整列宽 任何人都将与最长的列内容一样长
  • 如何转义 onClick 处理程序内 JavaScript 代码中的字符串?

    也许我只是想得太难了 但我在弄清楚链接的 onClick 处理程序内的某些 JavaScript 代码中的字符串上使用什么转义时遇到了问题 例子 a href Select a The and 是发生模板替换的地方 我的问题是项目名称可以包
  • React cloneElement 未设置键

    我正在构建一个动态生成键的表控件 我理解这可能不是一个好主意 我想键应该与其代表的数据唯一关联 否则 React 只能为我们生成唯一的 id 但无论哪种方式似乎没有设置按键 我不知道为什么 表中的行是用可以找到的函数生成的here http
  • Javascript - HTML Canvas 上的 Gecko 边框半径自适应(CSS border-radius)

    我试图弄清楚如何将 border radius css 属性的行为重现到 HTML 画布中 所以我已经在 J avascript 中做了一些事情 以便使用特定的半径 对于每个角 来计算给定形状的正确边界 如果需要的话 这是上一个问题 Gec
  • 将json数据从servlet传递到jsp到js文件

    我得到了这个创建 JSON 数据的 servlet 我想将此数据传递到一个 jsp 页面 该页面应该通过 InfoVis 工具包显示数据 servlet java JSONObject json new JSONObject JSONArr
  • 如何拦截javascript中innerHTML的变化?

    我需要拦截网页内单元格内容的任何更改 以下代码显示 addEventListener 不起作用 function modifyText alert var el document getElementById mycell el inner
  • AngularJS 的 HEAD 与 BODY

    在所有 AngularJS 示例中 Angular 库都放置在文档的 HEAD 标签中 我有一个基于 HTML5 Boilerplate 布局构建的现有项目 这定义了 JS 库应该放置在 DOM 的最底部 在 tag AngularJS需要
  • Promise链基本问题

    我正在尝试理解 Promise 我创建了一些有效的承诺链 而另一些则无效 我已经取得了进步 但显然缺乏基本概念 例如 以下承诺链不起作用 这是一个愚蠢的例子 但说明了问题 我正在尝试在链中使用 Node 的函数 randomBytes 两次
  • 在用户单击之前图像不会绘制在画布上?

    我使用执行类似以下操作的函数绘制几张图像 context drawImage img width 2 1 height 2 1 width height 我读过 我需要等待图像加载后才能绘制它 如下所示 img onload functio
  • 如何在网页上显示进度条直到网页完全加载?

    我想在网页中显示进度条 加载弹出窗口 直到页面完全加载 我的网页很重 因为它包含一个 HTML 编辑器 这是一个基于 jQuery 的 HTML 编辑器 需要很多时间才能完全加载 在加载时 我希望在页面上显示一个进度条 该进度条将在整个页面
  • Android:Html 锚链接仅在 Web 视图中有效一次

    在使用锚链接加载 html 内容时 我在 webview 中遇到一些奇怪的问题 以下代码非常适合锚标记 但是只有一次 第二次当我按下锚标签时不工作 protected void onCreate Bundle savedInstanceSt
  • CSS 链接图像带有下划线(“a”显示设置为阻止)

    我有一个菜单 我希望每个单独的项目中文本周围的所有空间都能将用户带到指定的页面 我在网上查了一下 发现最好的解决方案是将 a 显示设置为阻止 如下 a display block height 100 text decoration und

随机推荐