开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

ng-show inside ng-repeat实例不工作

是指在使用AngularJS的ng-repeat指令时，内部的ng-show指令无法正常工作的情况。

ng-repeat是AngularJS中用于循环遍历数组或对象的指令，它会根据指定的数据源重复渲染相应的HTML元素。而ng-show指令用于根据表达式的值来控制元素的显示与隐藏。

当ng-show指令被嵌套在ng-repeat指令内部时，可能会出现不工作的情况。这通常是由于作用域(scope)的问题导致的。

在ng-repeat中，每个重复的元素都会创建一个新的子作用域。而ng-show指令默认会在当前作用域中查找表达式的值，如果找不到则会向上级作用域查找。但由于ng-repeat创建了新的子作用域，ng-show指令可能无法正确地找到表达式的值。

解决这个问题的方法有两种：

使用$parent前缀：可以通过在ng-show指令中使用$parent前缀来访问父级作用域中的变量。例如，ng-show="$parent.showFlag"。
使用Controller As语法：可以在ng-repeat指令中使用Controller As语法来指定别名，然后在ng-show指令中使用别名来访问变量。例如，ng-repeat="item in items track by $index" ng-show="item.showFlag"。

需要注意的是，为了避免作用域的混乱，建议在使用ng-repeat时尽量避免在内部使用ng-show等指令。可以考虑将ng-show移动到ng-repeat外部，或者使用其他方式来控制元素的显示与隐藏。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile

相关搜索:PDF inside iFrame在iOS上不工作 TypeScript实例不工作 AngularJs Jquery ng-repeat accordion不工作 Ant设计- Object.map inside折叠面板不工作 readResolve不工作？:出现了Guava的SerializedForm实例 apache不工作httpd lightsail实例灯位名称 Django上的实例不工作，图片字段除外在不工作的实例上序列化.save()如何检查typescript中的文字。不工作的实例修复了div上的背景图像在iOS设备上不工作的问题？[JSFiddle inside]将一个对象实例设置为另一个不工作的对象的实例 react-redux不工作的日期选择器“预期的日期实例”Unity 3D，transform.position在实例化对象上不工作 Facebook视频播放器API xfbml.ready在移动设备上不工作。如何获取视频实例？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Speeding up AngularJS apps with simple optimizations

Avoid ng-repeat where possible Onto one of the more challenging approaches: avoiding ng-repeat where...Be mindful of how many bindings and scopes you’re creating inside templates that become a repeater....Directives Another offender that will increase $$watcher counts are the core Angular directives such as ng-show...constantly looped over by Angular – things such as true and false toggling to activate ng-show and ng-hide...If you’re doing something like this, it’s time to reconsider: $scope.something

4442 0

AngularJS 动画

实例勾选复选框隐藏 DIV: 隐藏 DIV: <div ng-hide...如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中：实例隐藏 DIV: <input type="checkbox" ng-model...AngularJS 添加/移除 class 的指令: ng-show ng-hide ng-class ng-view ng-include ng-repeat ng-if ng-switch ng-show...当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类。此外，在动画完成后，HTML 元素的类集合将被移除。

2.1K3 0

【AngularJS】 # AngularJS入门

AngularJS表格 ng-repeat 指令可以完美的显示表格。...11.2. ng-show指令隐藏或显示一个 HTML 元素我是可见的。... 我是不可见的。 12">我是可见的。...表单实例 novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。...AngularJS 实例 <!

23.2K6 0

Angularjs基础(十二)

ng-options指令使用数组来填充下拉列表,多次情况下与ng-repeat 指令一起使用。　　　　　　　　　　　　　　...ng-repeat 　　　　　　　　描述：定义集合中每项数据的模板　　　　　　　　实例：循环输出多个标题：　　　　　　　　　　<body ng-app="myApp" ng-controller...ng-show 　　　　　　　　描述：显示或隐藏HTML元素。　　　　　　　　实例：复选框选中时显示部分内容。　　　　　　　　　　... 　　　　　　　　　　　　　　　　　　　　　　　　Welcome...ng-switch-default> 　　　　　　　　　　　　　　　　　　　参数值：值： expression 描述：表达式会让匹配项显示，不匹配项移除

3K10 0

Angularjs基础(八)

stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 　　　　以下是一个完整的 HTML 实例... Create New User 　　　　　　　　　　　　　　　　　　<h3 ng-show...　　　　　　　　ng-if 　　　　　　　　ng-switch 　　　　ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。　　　　...当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类。　　　　此外，在动画完成后，HTML 元素的类集合将被移除。...CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果， CSS过渡　　　　　　CSS 过渡可以让我们平滑的将一个 CSS 属性值修改为另外一个：　　　　　　　　实例

2.9K6 0

Angularjs基础(三)

Email: 　　　　　　　　　　　　　　　　　　　　不是一个合法的邮箱地址　　　　　　　　　　　　以上实例中，提示信息会在ng-show 属性返回true的情况下显示应用状态　　　　...实例：当我们使用ng-repeat 指令时，没个重复项都访问了当前的重复对象。　　　　　　　　... 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　{

3.1K5 0

【一起来烧脑】一步学会AngularJS系统

{{ x }} ng-repeat指令用在一个对象数组上： <div ng-app=""...创建下拉列表 {{x}} ng-repeat 指令可以很好的显示表格 ...}} {{ x.Country }} SQL 使用PHP从MySQL中获取数据实例：按钮 {{ mySwitch }} ng-show...指令 ng-show 指令隐藏或显示一个 HTML 元素 ng-hide 指令 ng-hide 指令用于隐藏或显示 HTML 元素 HTML事件 ng-click 指令 ng-click 指令定义了

5.6K2 0

AngularJS Bootstrap

="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 以下是一个完整的 HTML 实例...> Edit First Name Last Name Create New User <h3 ng-show...指令解析 AngularJS 指令描述元素定义一个应用(未命名) 元素定义一个控制器元素时调用函数 editUser() 元素 <h3 ng-hide 如果

4.7K2 0

【AngularJS】—— 1 初识AngularJs

怀着激动与忐忑的心情，开始了学习AngularJS的旅程，很久之前就听说了这个前端框架，但是由于自己一直没有从事相关的工作，因此也没有进行学习。...ng-controller="namesController"> 输入过滤: 　　orderBy　　排序循环对象： <li ng-repeat...实现表格展现 ...例如：ng-disabled ng-show 点我！

2.7K9 0

【AngularJS】—— 13 服务Service

容器来运行代码了，先看看程序源码，视图方面还是跟普通的代码相同： <pre ng-show...2 单例：服务都是单例的，一个应用生命周期内，只有一个服务的实例存在。　　3 注入器：服务的实例化都是有注入器injector创建的。...在我们创建controller控制器时，后面指明了需要注入一个myService服务，注入器就会去实例化该服务。

1.4K5 0

angularjs学习第七天笔记（系统指令学习）

div> ng-readonly指令 <input type="text" ng-model="isReadonly" placeholder="只要我<em>不</em>空下面就不可操作...模块化加载外部的模块　　　　　　　使用注意要点：　　　　　　　　a.ng-include,如果单纯指定地址，必须要加引号　　　　　　　　b.ng-include,加载外部html，script标签中的内容<em>不</em>执行.../javascript"> var app = angular.module("myApp", []); 　　5、ng-if ：根据条件选择性的是否加载　　　ng-if和ng-show...、ng-hide都能够实现标签的显示隐藏　　　但是其有本质的区别，ng-if是直接不加载，而后者是通过css样式控制　　　代码实例：　　　　　　　　　　 ng-if指令　　　　　　6、ng-repeat:循环遍历一个集合数据，根据模板生成数据列　　　几个关键属性值：　　　　$index：遍历的进度（0...length-1）

2.9K1 0

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

实际上，脏检查是digest执行的，另一个更常用的用于触发脏检查的函数apply——其实就是 $digest 的一个简单封装（还做了一些抓异常的工作）。...这是一种行之有效的减少绑定表达式数量的方法，与 ng-repeat 连用效果更佳（下文会提到），但过度使用也容易引发 bug。...然而入上文所说，肉眼不可见不代表不会跑脏检查。...3、给 ng-repeat 手工添加 track by 不恰当的 ng-repeat 会造成 DOM 树反复重新构造，拖慢浏览器响应速度，造成页面闪烁。...ng-if跟ng-show/hide的区别有哪些？

7.8K4 0

angularjs学习第七天笔记（系统指令学习）

div> ng-readonly指令 <input type="text" ng-model="isReadonly" placeholder="只要我<em>不</em>空下面就不可操作...模块化加载外部的模块　　　　　　　使用注意要点：　　　　　　　　a.ng-include,如果单纯指定地址，必须要加引号　　　　　　　　b.ng-include,加载外部html，script标签中的内容<em>不</em>执行.../javascript"> var app = angular.module("myApp", []); 　　5、ng-if ：根据条件选择性的是否加载　　　ng-if和ng-show...、ng-hide都能够实现标签的显示隐藏　　　但是其有本质的区别，ng-if是直接不加载，而后者是通过css样式控制　　　代码实例：　　　　　　　　　　 ng-if... 　　　　　　6、ng-repeat:循环遍历一个集合数据，根据模板生成数据列　　　几个关键属性值：　　　　$index：遍历的进度（0...length-1）

2.6K3 0

angular常用内置指令

内置指令所有的内置指令的前缀都为ng，不建议自定义指令使用该前缀，以免冲突。首先从一些常见的内置指令开始。先列出一些关键的内置指令，顺便简单说说作用域的问题。...但是，不建议过度使用 ng-controller 我们用这个指令在一个DOM元素上装上controller。一个控制器? 确实，从字面意思上这样理解倒是不错，那我们为什么需要控制器?...ng-checked 这个是给多选用的 ng-selected 这个是给下拉框用的 ng-show/ng-hide 根据表达式显示/隐藏HTML元素，注意是隐藏，不是从DOM移除...ng-switch 单独使用没什么意思，下面是例子: ng-repeat 不明白为毛不叫iterate，总之是遍历集合，给每个元素生成模板实例，每个实例的作用域中可以用一些特殊属性

1901 0

angularjs中常用的ng指令介绍【转载】

其中，指令无疑是使用量最大的，ng内置了很多指令用来控制模板，如ng-repeat，ng-class，也有很多指令来帮你完成业务逻辑，如ng-controller,ng-model。...在ng表达式中不可以使用循环语句、判断语句，事实上在模板中使用复杂的表达式也是一个不推荐的做法，这样视图与逻辑就混杂在一起了。...与ng-class相近的，ng还提供了ng-class-odd、ng-class-even两个指令，用来配合ng-repeat分别在奇数列和偶数列使用对应的类。...，ng-hide 对于比较常用的元素显隐控制，ng也做了封装，ng-show和ng-hide的值为boolean类型的表达式，当值为true时，对应的show或hide生效。...我也一样对此表示不解，因为不写onclick已经很多年。。。

1.9K3 0

AngularJS一些简单处理得到性能提升

（用grunt groundskeeper） ng-if vs ng-show，前者会移除DOM和对应的watch 及时移除不必要的$watch。...如果不涉及数据变更，还可以加上第三个参数false，避免调用$apply。对时间有要求的，第二个参数可以设置为0。...controller中执行的$evalAsync，会在angular操作DOM之前执行，一般不这么用。而使用$timeout，会在浏览器渲染之后执行。...优化ng-repeat 限制列表个数列表对象的数据转换，在放入scope之前处理。...若优化为ng-repeat="task in tasks track by task.id后，angular就能复用task对应的原DOM进行更新，减少不必要渲染。

1.7K2 0

走进AngularJs(二) ng模板中常用指令的使用方式

其中，指令无疑是使用量最大的，ng内置了很多指令用来控制模板，如ng-repeat，ng-class，也有很多指令来帮你完成业务逻辑，如ng-controller,ng-model。...在ng表达式中不可以使用循环语句、判断语句，事实上在模板中使用复杂的表达式也是一个不推荐的做法，这样视图与逻辑就混杂在一起了。...与ng-class相近的，ng还提供了ng-class-odd、ng-class-even两个指令，用来配合ng-repeat分别在奇数列和偶数列使用对应的类。...，ng-hide 　　　对于比较常用的元素显隐控制，ng也做了封装，ng-show和ng-hide的值为boolean类型的表达式，当值为true时，对应的show或hide生效。...我也一样对此表示不解，因为不写onclick已经很多年。。。

2.9K2 0

AngularJS快速入门

我们询问他面试情况时，他给俺这个菜菜科普了该技术，印象比较深的是该技术支持前端MVC架构，可以完成大部分原有的后台工作，当时就觉得很神奇，但由于自身技术基础比较薄弱，没有太多时间和积累去学习新的技术，因而搁置了...Shopping Cart 6 7 8 Your Order 9 ，<input

2.5K5 0

【笔记】AngularJs学习笔记【实践回顾与知识点归纳】

-- ng-repeat为items数组中每个元素拷贝一个这个div中的DOM，在div每次拷贝中，同时设置一个叫item的属性代表当前元素 --> <div ng-repeat='item in items...4、angular常用指令 ng-bind、ng-model、ng-show/hide 、ng-if ng-checked、ng-src、ng-href、 ng-class 、 ng-selected、...ng-submit 、ng-change、 ng-disabled 这些常用指令一定要熟悉它们的用法，在实际工作中很常用到。

2243 0

【笔记】AngularJs学习笔记【实践回顾与知识点归纳】

-- ng-repeat为items数组中每个元素拷贝一个这个div中的DOM，在div每次拷贝中，同时设置一个叫item的属性代表当前元素 --> <div ng-repeat='item in items...4、angular常用指令 ng-bind、ng-model、ng-show/hide 、ng-if ng-checked、ng-src、ng-href、 ng-class 、 ng-selected、...ng-submit 、ng-change、 ng-disabled 这些常用指令一定要熟悉它们的用法，在实际工作中很常用到。

2624 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭