标签: ng-show
AngularJS:ng-show/ng-hide不使用`{{}}`插值
我试图使用AngularJS提供的ng-show和ng-hide函数显示/隐藏一些HTML .
根据文档,这些功能的用途如下:
ngHide - {expression} - 如果表达式为truthy,则元素分别显示或隐藏.ngShow - {expression} - 如果表达式是真实的,那么元素将分别显示或隐藏.
这适用于以下用例:
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
但是,如果我们使用来自对象的参数作为表达式,那么ng-hide并ng-show给出正确的true/ false值,但这些值不会被视为布尔值,所以总是返回false:
资源
<p ng-hide="{{foo.bar}}">I could be shown, or I could be hidden</p>
<p ng-show="{{foo.bar}}">I could be shown, or I could be hidden</p>
结果
<p ng-hide="true">I should be hidden but I'm actually shown</p>
<p ng-show="true">I should be shown but I'm actually hidden</p>
这可能是一个错误,或者我没有正确地执行此操作.
我找不到关于引用对象参数作为表达式的任何相关信息,所以我希望任何对AngularJS有更好理解的人都可以帮助我吗？
推荐指数
解决办法
查看次数
如何基于布尔值在AngularJS中切换ng-show？
我有一个表单来回复我想要显示的消息,只有当它isReplyFormOpen为真时,每次我点击回复按钮我想切换表单是否显示.我怎样才能做到这一点？
推荐指数
解决办法
查看次数
ng-show ="true"但仍有class ="ng-hide"
我是AngularJS的新手,因此我的问题可能会有一个简单的解决方案.我一直在研究这个表格.我有两个输入 - 一个用于门的数量,一个用于窗口的数量.然后,如果他们满足一定数量的门窗,我想要展示几个div.当我在输入中输入数字时,ng-show解析为"true".但该元素仍然具有"ng-hide"类,仍然隐藏它.
这是我的代码示例:
<body ng-app>
Doors: <input type="number" ng-model="doors"><br>
Windows: <input type="number" ng-model="windows"><br>
<div ng-show="{{(doors + windows) < 6}}">
Shows if you have 0-5 doors and windows combined.
</div>
<div ng-show="{{(doors + windows) > 5 && (doors + windows) < 11}}">
Shows if you have 6-10 doors and windows combined.
</div>
<div ng-show="{{(doors + windows) > 10 }}">
Shows if you have more than 10 doors and windows combined.
</div>
</body>
这是我进入3门和4个窗口时的输出:
<div ng-show="false" class="ng-hide">
Shows if you have …推荐指数
解决办法
查看次数
为什么这个简单的AngularJS ng-show不起作用？
我无法弄清楚为什么我的简单AngularJS应用程序无法正常工作."加载......"应该被隐藏,并且"完成!" 应在1秒后显示.
HTML:
<div ng-app>
<div ng-controller="TestCtrl">
<div class="text-center" ng-show="loading">
<h1>Loading...</h1>
</div>
<div class="text-center" ng-show="!loading">
<h1>Done!</h1>
</div>
</div>
</div>
使用Javascript:
function TestCtrl($scope) {
$scope.loading = true;
setTimeout(function () {
$scope.loading = false;
}, 1000);
}
推荐指数
解决办法
查看次数
AngularJS Group by Directive without External Dependencies
我是Angular的新手,想学习处理问题的最佳方法.我的目标是有一个可重用的方法来创建按标题分组.我创建了一个可行的解决方案,但我认为这应该是一个指令,而不是我的控制器中的范围函数,但我不知道如何实现这一点,或者指令是否是正确的方法.任何投入将不胜感激.
看看我目前处理jsFiddle的方法
在HTML中,它是一个使用ng-repeat的简单列表,我在ng-show上调用newGrouping()函数.该函数传递对完整列表的引用,我想要分组的字段和当前索引.
<div ng-app>
<div ng-controller='TestGroupingCtlr'>
<div ng-repeat='item in MyList'>
<div ng-show="newGrouping($parent.MyList, 'GroupByFieldName', $index);">
<h2>{{item.GroupByFieldName}}</h2>
</div>
{{item.whatever}}
</div>
</div>
</div>
在我的控制器中,我有newGrouping()函数,它只是将当前值与之前的值进行比较,第一项除外,并根据匹配返回true或false.
function TestGroupingCtlr($scope) {
$scope.MyList = [
{GroupByFieldName:'Group 1', whatever:'abc'},
{GroupByFieldName:'Group 1', whatever:'def'},
{GroupByFieldName:'Group 2', whatever:'ghi'},
{GroupByFieldName:'Group 2', whatever:'jkl'},
{GroupByFieldName:'Group 2', whatever:'mno'}
];
$scope.newGrouping = function(group_list, group_by, index) {
if (index > 0) {
prev = index - 1;
if (group_list[prev][group_by] !== group_list[index][group_by]) {
return true;
} else {
return false;
}
} else {
return true;
} …group-by angularjs angularjs-directive angularjs-ng-repeat ng-show
推荐指数
解决办法
查看次数
ng-Animate不适用于"隐藏和显示"设置
我正在使用AngularJS 1.2.11版.我已经设置了一个工具栏,可以使用ng-Animate(显示和隐藏)进行过渡.
这是HTML:
<div>
<div class="full-height">
<menu-main class="full-height pull-left"></menu-main>
<menu-sub class="full-height pull-left" ng-show="data.active" ng-animate="'animate'">
</menu-sub>
</div>
</div>
这是相同工具栏元素的CSS
.animate.fade-hide, .animate..fade-show {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
}
.animate.fade-hide, {
position: fixed;
top: 500px;
opacity: 0.3;
}
.animate.fade-hide, .animate.fade-hide-active
{
position: fixed;
top: 500px;
opacity: 0.3;
}
.animate.fade-show {
position: fixed;
top: 100px;
opacity: 1;
}
.animate.fade-show, .animate.fade-show-active {
position: fixed;
top: …推荐指数
解决办法
查看次数
ng-show令人不安的div布局 - angularJS
ng-show="!notesOpened"如果notesOpened变量为true,我用来隐藏div.然而,当它隐藏它会弄乱布局.有没有办法让ng-show以与css属性相同的方式运行visibility:hidden？以便隐藏div周围的所有div元素保持在同一个地方
推荐指数
解决办法
查看次数
如何根据我当前所在的页面/路线使用角度ng-hide？
有一个角度应用程序,如果主视图是主页视图,我想隐藏其中一个"包含的视图".
<div id="page" ng-class="{ showNav: $root.showNav }">
<header id="pageHeader" ng-controller="HeaderCtrl" data-ng-include="'views/includes/header.html'"></header>
<div id="pageHero" ng-show='$rootScope.fullView' ng-controller="MainsearchCtrl" data-ng-include="'views/mainSearch.html'"></div>
<div id="pageContent" ng-view=""></div>
</div>
推荐指数
解决办法
查看次数
为什么这个ng-show ng-hide无效
我在AngularJS中有简单的应用程序.我想在发出AJAX请求时动态显示消息.不幸的是,它始终处于隐藏状态,我无法弄清楚原因.
HTML:
<div ng-show="message">
<h2>show</h2>
</div>
<div ng-hide="!message">
<h2>Hide</h2>
</div>
AngularJS控制器:
function merchantListController($scope, $http, $rootScope, $location, global) {
$http({
method: 'POST',
url: global.base_url + '/merchant/list',
}).success(function($data) {
if ($data.status === 'success') {
$scope.merchants = $data.data;
$scope.$apply(function(){
$scope.message = true;
});
}
});
}
推荐指数
解决办法
查看次数
AngularJs Inline检查数组是否检查
在AngularJs中内联是否有办法检查某些内容是否为数组？
我原以为这会起作用:
<div ng-show="Array.isArray(textStuff[0][1])">Hi</div>
我已经证实它实际上是一个数组.有什么我缺少的或其他方式？
推荐指数
解决办法
查看次数
标签 统计
angularjs ×10
ng-show ×10
javascript ×4
ng-hide ×4
arrays ×1
css ×1
forms ×1
group-by ×1
html ×1
ng-animate ×1