AngularJS切换Tab异常：仅主Tab显示其他Tab不展示问题排查

让我来帮你排查这个问题，看起来主要有几个关键点导致除了main Tab外，其他Tab无法正常展示：

1. 核心问题：vm.activetab初始化错误 #

你当前把vm.activetab初始化为空字符串''，但字符串属于JavaScript的原始数据类型，当你尝试给它添加属性（比如vm.activetab.calender = true）时，JS会临时将字符串包装成对象，但这个属性不会被持久保存——因为原始类型的值是不可变的。这就导致只有第一个条件的设置能“偶然”生效，其他条件的属性设置根本不会留在vm.activetab上。

修复方法：把初始化语句改成空对象：

function showFields(){
 vm.activetab = {}; // 替换原来的 vm.activetab = '';
 if(vm.selectpage.name=='dashboard'){
 vm.activetab.main = true;
 }else if(vm.selectpage.url == 'calender'){
 vm.activetab.calender = true;
 }else if(vm.selectpage.url == 'to_do'){
 vm.activetab.to_do = true;
 }else if(vm.selectpage.url == 'mobile_consumption'){
 vm.activetab.mobile_data_consumption = true;
 }else if(vm.selectpage.url == 'user_activity'){
 vm.activetab.mobile_data_consumption = true;
 }else if(vm.selectpage.url == 'using_applications'){
 vm.activetab.mobile_data_consumption = true;
 }else if(vm.selectpage.url == 'session_activity'){
 vm.activetab.activity_per_session = true;
 }
 console.log(vm.activetab.mobile_data_consumption);
}

2. 检查条件匹配的准确性 #

注意到第一个判断用的是vm.selectpage.name，而其他判断用的是vm.selectpage.url，你需要确认：当选择calendar等选项时，vm.selectpage.url的实际值确实和你代码里写的'calender'、'to_do'完全一致（包括拼写、大小写）。比如如果实际url是'calendar'（双a拼写），那条件就不会匹配，对应的Tab自然不会显示。

3. 代码优化建议（可选） #

你代码里有三个条件都设置同一个mobile_data_consumption属性，可以把这些url整理成数组，用includes方法合并判断，让代码更简洁易维护：

function showFields(){
 vm.activetab = {};
 const dataRelatedTabs = ['mobile_consumption', 'user_activity', 'using_applications'];
 if(vm.selectpage.name=='dashboard'){
 vm.activetab.main = true;
 }else if(vm.selectpage.url == 'calender'){
 vm.activetab.calender = true;
 }else if(vm.selectpage.url == 'to_do'){
 vm.activetab.to_do = true;
 }else if(dataRelatedTabs.includes(vm.selectpage.url)){
 vm.activetab.mobile_data_consumption = true;
 }else if(vm.selectpage.url == 'session_activity'){
 vm.activetab.activity_per_session = true;
 }
 console.log(vm.activetab.mobile_data_consumption);
}

另外，如果你有对应mobile_data_consumption和activity_per_session的Tab内容，记得在HTML里补充对应的ng-if判断，比如：

<div ng-if="vm.activetab.mobile_data_consumption" style="margin-top:20px"> // 对应的数据消费Tab内容 </div>
<div ng-if="vm.activetab.activity_per_session" style="margin-top:20px"> // 对应的会话活动Tab内容 </div>

先修改vm.activetab的初始化，再确认url的匹配值，应该就能解决你的问题了！

内容的提问来源于stack exchange，提问作者Mohd Mobeen