ng-show 和 ng-if 无法显示内容
ng-show and ng-if fail to display content
尝试构建一个简单的选项卡。 选项卡 0 中的内容按预期显示和隐藏,但是,选项卡 1 仅为空白,尽管单击选项卡 1 时范围更新为 true。
首先,控制器在包装器div 上启动:
<div ng-controller="AdvancedSettingsController as settings">
下面是控制器:
function AdvancedSettingsController($scope) {
//setting tab name, and initial booleans
$scope.tab = [
{
title : "Domains",
active : true
},
{
title: "Locale",
active : false
}
];
}
而 ng 点击侦听器:
AdvancedSettingsController.prototype.tabs = function (o) {
//set both tab active booleans to false
for (var i = 0; i <= $scope.tab.length - 1; i++) {
$scope.tab[i].active = false;
}
//set active tab boolean to true
$scope.tab[o].active = true;
}
现在,使用 ng-repeat 循环的选项卡对象 - settings.tabs($index) 正在将索引传递给上面的函数:
<li data-ng-repeat="tab in settings.tab">
<a data-ng-click="settings.tabs($index)">
{{tab.title}}
</a>
</li>
内容保存在 2 个div 中,如果:
<div data-ng-if="settings.tab[0].active">
Content 1, true by default. Hides and shows as nav is toggled.
</div>
<div data-ng-if="settings.tab[1].active">
Content 2, false by default. Never shows as nav is toggled.
</div>
最后,Chrome 从不更新以下信息: ngIf: settings.tab[1].active
在您的 html 中,您正在尝试通过 settings.tab 和 settings.tabs 访问数据,但我看不到您在哪里定义该设置......
按照您在此处发布的代码,我创建了此解决方案:http://codepen.io/anon/pen/raMbGr
<li ng-repeat="t in tab">
<a ng-click="tabs($index)">
{{t.title}}
</a>
</li>
<div ng-if="tab[0].active">
Content 1, true by default. Hides and shows as nav is toggled.
</div>
<div ng-if="tab[1].active">
Content 2, false by default. Never shows as nav is toggled.
</div>
我的问题的答案在这里并不明显,是我在第一个选项卡中有一个额外的结束div。它正在关闭ng-if,然后有破碎的标记。
我的代码看起来像这样:
<div ng-if="tab[0].active">
<div>
Content 1, true by default. Hides and shows as nav is toggled.
</div>
**</div>**
</div>
<div ng-if="tab[1].active">
Content 2, false by default. Never shows as nav is toggled.
</div>
ng-if没有在正确的位置关闭 - 所以尽管$scope更新,html还是坏了。 所以,烦人。
相关文章:
- 我需要NG-IF/NG-SWITCH还是NG-SHOW&NG-HIDE
- 如何应用带过滤器的ng if来过滤记录,并在同一页面中显示两个不同的视图
- 根据特定条件使用ng显示/ng隐藏来显示/隐藏元素
- 在 ng-if 编译后访问指令中的 DOM 元素
- 如何在更改时显示ng个重复元素的总和
- 通过ng-if设置隐藏文本框的值
- Angular js将只显示ng repeat中的第一个元素
- AngularJS ng-if指令在移除元素之前,即使条件为false,也会短暂呈现
- 无法在 ng 重复中显示 ng 模板
- 使用 ng-if 时 ng 类的标记行为
- 为什么更改范围获胜'不能在ng if内部工作,而是通过函数调用AngularJS
- 如何在使用$http缓存时重新触发ng-if/ng显示动画
- 角度基础选项卡显示错误的内容和带有 ng-if 的活动选项卡
- ng-show 和 ng-if 无法显示内容
- ng-if :隐藏/显示属性.怎么做
- 在AngularJS中的ng if或ng显示中循环
- 使用ng-if/ng-show/ng-switch的Angular条件显示会简要地显示这两个元素
- AngularJS ng-if根据路由位置显示报头内容
- 如何防止Angular在ng-if求值之前渲染和显示页面?
- 如何正确地隐藏/显示html通过ng-if/ng-show/ng-hide从app.run函数