尝试构建一个简单的选项卡。选项卡 0 中的内容按预期显示和隐藏,但是选项卡 1 始终为空白,尽管单击选项卡 1 时范围更新为 true。
首先, Controller 在包装 div 上启动:
<div ng-controller="AdvancedSettingsController as settings">
这是 Controller :
function AdvancedSettingsController($scope) {
//setting tab name, and initial booleans
$scope.tab = [
{
title : "Domains",
active : true
},
{
title: "Locale",
active : false
}
];
}
还有 ng-click 监听器:
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 中,带有 ifs:
<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 永远不会更新 if: 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>
关于javascript - ng-show 和 ng-if 无法显示内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27697616/