Angular ng-show不反映条件的值
ng-show 是 AngularJS 中的一个指令，用于根据表达式的值来控制元素的显示或隐藏。当表达式的值为 true 时，元素会显示；当值为 false 时，元素会隐藏。如果你发现 ng-show 没有正确反映条件的值，可能是由以下几个原因造成的：
基础概念
- AngularJS: 是一个用于构建动态 Web 应用的 JavaScript 框架。
- ng-show: 是 AngularJS 提供的一个指令，用于根据表达式的真假来切换元素的可见性。
可能的原因及解决方法
- 表达式错误:
- 确保
ng-show绑定的表达式语法正确，并且能够返回预期的布尔值。
- 确保
- 作用域问题:
- 如果表达式依赖于某个作用域变量，确保该变量在当前作用域中是可访问的。
- 初始化时机:
- 如果元素在 AngularJS 初始化之前就已经存在于 DOM 中，可能需要使用
$timeout或$scope.$apply()来确保 AngularJS 能够检测到变化。
- 如果元素在 AngularJS 初始化之前就已经存在于 DOM 中，可能需要使用
- 异步数据更新:
- 如果数据是通过异步操作（如 AJAX 请求）获取的，确保在数据更新后通知 AngularJS 进行脏检查。
- CSS 样式冲突:
- 检查是否有 CSS 样式覆盖了
ng-show的效果，例如使用了display: block !important;。
- 检查是否有 CSS 样式覆盖了
示例代码
假设我们有一个简单的 AngularJS 应用，其中有一个按钮用于切换显示一个消息框：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS ng-show Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="toggleMessage()">Toggle Message</button>
<div ng-show="isMessageVisible">Hello, World!</div>
<script>
var app = angular.module('myApp', []);
app.controller('MainCtrl', ['$scope', function($scope) {
$scope.isMessageVisible = false;
$scope.toggleMessage = function() {
$scope.isMessageVisible = !$scope.isMessageVisible;
};
}]);
</script>
</body>
</html>在这个例子中，点击按钮会切换 isMessageVisible 的值，从而控制消息框的显示和隐藏。
解决步骤
- 检查表达式:
- 检查表达式:
- 确保作用域正确:
- 如果你在指令或服务中使用
ng-show，确保你正确地绑定了作用域变量。
- 如果你在指令或服务中使用
- 处理异步更新:
- 处理异步更新:
- 检查 CSS:
- 确保没有样式规则强制显示隐藏的元素。
通过以上步骤，你应该能够解决 ng-show 不反映条件值的问题。如果问题仍然存在，可能需要进一步调试或查看控制台中的错误信息来定位问题所在。
相关·内容
我有一个角模板与用户数据的表单。一些字段，如姓名和地址，只有在用户需要发票时才会显示： <!console.log($scope['product']); };
表单<e
浏览 2提问于2017-01-13得票数 0
回答已采纳
1回答
我是安古拉语的初学者，原谅我的愚蠢错误。我有一个表，它在三列中显示数据，我想根据条件过滤这个表，并在包含整数的一列中隐藏不必要的数据。我使用了ng-显示与ng-模型链接的一些条件，如果我只在加载完总表单后才在ng-模型中输入数据，这是非常有效的。但是，我希望在开始时显示所有表数据，然后根据ng-show条件隐藏不必要的数据。<tr ng-show= "change
浏览 1提问于2013-08-29得票数 0
回答已采纳
试图使用键/值映射来确定是否应该显示角控制元素：
angular.js:6173 TypeError: fnPtr is not a function at Object.$apply (angular.js:8771) at Object.invoke (angular.js:2873)
以这种
浏览 5提问于2015-08-07得票数 0
回答已采纳
下面是一个非常简单的应用程序，它允许用户更改其名称。但是，在这段代码中有一些错误。每当用户将某些内容写入输入时，更改都不会反映在欢迎标题中。app.js .module('angularScopesBug', []) <div ng-controller="Edit
浏览 0提问于2018-12-25得票数 0
回答已采纳
我是AnguarJS的新手，关于ng-show有一些我不理解的地方。当用户开始在输入字段中输入时，我希望出现一个冒号，后面跟着输入的内容。
浏览 2提问于2013-08-12得票数 8
如果内部编写的条件匹配，我会尝试显示一个div。虽然在某些情况下，它确实匹配，但仍然没有显示ng-show div，可能是ng-show条件，不返回true。我尝试将每个列表值与在控制器的作用域中设置的变量groupAdmin进行比较。<div class="list__item__right">
<div ng-show='{{groupParticipan
浏览 0提问于2017-02-23得票数 1
回答已采纳
在我的angular js项目中，我有四个复选框。在四个复选框中，三个复选框具有三个条件(如ng-hide和ng-show)，其中一个复选框具有全选和取消选择所有条件。有什么办法解决这个问题吗？<c
浏览 30提问于2020-06-08得票数 0
回答已采纳
我刚刚用ng new app搭建了Angular应用。我想有条件地隐藏一些元素。我试着用ng-show来实现。但它不起作用。<span ng-show="false">Angular App</span> 不管我把什么作为ng-show的参数，元素总是会显示出来。我需要导入什么吗，或者我在某些语法上出错了吗？
浏览 11提问于2020-12-27得票数 0
回答已采纳
我正在测试ng-show和AngularJS表达式，但我发现了一些我不能理解的东西。我创建了一个变量displayed，并为它分配了一个字符串'false' (而不是boolean)。表达式displayed && true的计算结果为true，第二个div没有问题(因为字符串和true应该为true)。我知道Angular表达式和JavaScript表达式之间有一些不同，但是我不知道为什么没有显示第一个div；看起来displayed是由Angular编译成布尔<em
浏览 1提问于2015-05-21得票数 6
回答已采纳
我的控制器里有这些线$scope.myEmpty = {};以及模板中的这个ng-show
<table ng-show="!angular.equals(myEmpty, VLANEnabledServers)" ng-cloak class=&quo
浏览 0提问于2014-12-16得票数 3
回答已采纳
12回答
我想知道在angular中是否有一种方法可以有条件地显示内容，而不是使用ng-show等。例如，在backbone.js中，我可以对模板中的内联内容做一些事情，比如：但在angular中，我似乎仅限于显示和隐藏用html标记包装的内容。<p ng-hide="true">I'm hidden</
浏览 2提问于2013-01-05得票数 200
回答已采纳
当我从angular JS更改ng-show binded属性时，更改仍然不会反映在UI中。但其他属性更改反映了UI中的良好。下面是我的代码 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angul
浏览 19提问于2016-07-25得票数 1
回答已采纳
所以我的angular应用程序是一个庞然大物，所以我在这里粘贴相关的部分，只是为了看看Angular Gurus at So是否可以发现任何可以帮助我的东西。但是当我检查span 2和span 3时，它们的HTML代码如下所示：所以我的第一个问题是：ng-hide是通过Angular
浏览 0提问于2016-08-01得票数 0
2回答
当用户单击“取消”按钮时，我试图恢复输入框的值。我在这里做错了什么？在这里，显示按钮将备份“temp”变量的值，如果用户在revert按钮的帮助下取消输入，则应该反映原始值。app.controller('myCtrl', function($scope) {
浏览 0提问于2019-06-17得票数 1
回答已采纳
我有一个带有ng-src属性的img元素，如果模型图像值存在，它将显示/隐藏，如下所示：
<img ng-show="model.image" ng-src="img/{{model.image}}"/但很明显，当不存在任何映像值时，它仍然向服务器发出GET请求"...img/“。我怎样才能阻止它发出这个请求？我想我需要有条件地从DOM中删除元素，并且应该将我的DOM操作放在一个指令中，但我不
浏览 1提问于2013-07-20得票数 4
回答已采纳
3回答
在这里，我在控制器中创建一个对象，并在我的网页中创建对象值。但在这里，ng显示不计算下面的表达式。但是，如果我以$scope.ngshow =false的形式在控制器中创建一个变量，那么就会工作。DOCTYPE html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.jsa.name}} <
浏览 6提问于2017-04-12得票数 1
回答已采纳
有没有一种好的方法可以添加和删除元素，而不会重排页面并导致所有元素抖动？而类也不需要有没有一种好的方法可以添加和删除元素，而不会重排页面并导致所有元素抖动？
浏览 1提问于2014-12-21得票数 0
1回答
我正在使用datatables在angular中创建一个表。我使用了作用域中的值，并将该值与接收到的数据进行了比较。"columns": [{ data: null, render: function ( data, type, row ) {return '<p ng-show<
浏览 6提问于2016-07-29得票数 1
我希望从定义ng-controller的相同标记中访问角控制器属性，如果属性languages有少于一个元素，则使用ng-if隐藏标记。准确地说，这就是我的不工作的代码的样子： ...</li>
我可以访问根元素本身
浏览 10提问于2015-10-15得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
