Javascript Angularjs嵌套选项卡绑定到json

使用angularjs 1.3.4和ui引导tpls 0.13.4和引导3 css

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

我有一个json，如下所示：

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

从上面的json（忽略某些数据，因为它在选项卡中使用）中，我想创建如下选项卡：

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

MasterTab1        MasterTab2
tab1  tab2         tab1 tab2 tab3

所以基本上两个标签MasterTab1，MasterTab2都会在那里。但它们下面的子选项卡可能存在，也可能不存在，并且可以是任意数量的。 因此，当他们单击MasterTab1时，我想显示相关选项卡tab1和tab2。当他们单击MasterTab2时，我想显示相关选项卡tab1、tab2和tab3

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

早些时候，我没有父子选项卡，所以我使用类似这样的方式来显示选项卡：

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

  <tabset>
    <tab ng-repeat="tabs in myTabsData"></tab>
 </tabset>

但现在我不知道如何创建这个嵌套选项卡结构。 如果有人能帮忙，我们将不胜感激

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

<tabset ng-repeat="tabs in myTabsData">
 <tabset ng-repeat="tab in tabs>
  <tab>{{tab}}</tab>
 </tabset>
</tabset>

试试这个

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

<tabset ng-repeat="tabs in myTabsData">
 <tabset ng-repeat="tab in tabs>
  <tab>{{tab}}</tab>
 </tabset>
</tabset>


这里有几件事：

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

1） 不要将引导UI与Angular一起使用。它需要jQuery，它是一个DOM操作框架，就像AngularJS是一个DOM操作框架一样。试图同时使用这两种方法会让人感到沮丧。取而代之的是使用AngularJS特定的库，该库的唯一目的是在Angular中使用引导程序，而不需要完整的jQuery框架

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

2） 由于JSON数据结构松散，因此不能使用标准的
ng repeat=“object in collection”
指令。相反，您需要在集合中使用
ng repeat=“（键，值）”

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

使用您的示例，下面介绍如何使用UIB tabset指令从JSON创建嵌套选项卡UI：

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}


angular.module（'app'，['ui.bootstrap']））
.controller（'ctrl'，function（）{
此参数为0.tabs={
“MasterTab1”：{
“表1”：[“somedata1-1”、“somedata1-2”]，
“表2”：[“somedata2-1”、“somedata2-2”]
},
“MasterTab2”：{
“表1”：[“somedata2-1-1”、“somedata2-1-2”]，
“表2”：[“somedata2-2-1”、“somedata2-2-2”]，
“表3”：[“somedata2-3-1”、“somedata2-3-2”]
}
};
});

{{v2}
这里有两件事：

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

1） 不要将引导UI与Angular一起使用。它需要jQuery，它是一个DOM操作框架，就像AngularJS是一个DOM操作框架一样。试图同时使用这两种方法会让人感到沮丧。取而代之的是使用AngularJS特定的库，该库的唯一目的是在Angular中使用引导程序，而不需要完整的jQuery框架

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

2） 由于JSON数据结构松散，因此不能使用标准的
ng repeat=“object in collection”
指令。相反，您需要在集合中使用
ng repeat=“（键，值）”

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

使用您的示例，下面介绍如何使用UIB tabset指令从JSON创建嵌套选项卡UI：

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}


angular.module（'app'，['ui.bootstrap']））
.controller（'ctrl'，function（）{
此参数为0.tabs={
“MasterTab1”：{
“表1”：[“somedata1-1”、“somedata1-2”]，
“表2”：[“somedata2-1”、“somedata2-2”]
},
“MasterTab2”：{
“表1”：[“somedata2-1-1”、“somedata2-1-2”]，
“表2”：[“somedata2-2-1”、“somedata2-2-2”]，
“表3”：[“somedata2-3-1”、“somedata2-3-2”]
}
};
});

{{v2}
这将如何创建父子选项卡。我需要创建两个父选项卡master1和master2，在每个主选项卡中，我需要在每个选项卡1&选项卡和选项卡3下创建子选项卡我已经创建了此演示，您是否可以更新此演示以提供解决方案此演示如何创建父-子选项卡。我需要创建两个父选项卡master1和master2，在每个主选项卡中，我需要在每个选项卡1&选项卡&选项卡3下创建子选项卡我已经创建了此演示，您可以更新此演示以提供您的solution@georgeawg不，我没有创建任何自定义指令。我正在使用angularjs 1.3.4和bootstrap 3.3AngularJS与bootstrap.js不能很好地配合使用。@georgeawg不，我没有创建任何自定义指令。我正在使用angularjs 1.3.4和bootstrap 3.3AngularJS与bootstrap.js不能很好地配合使用。Lex对angularjs 1.3.4有效，因为我们正在使用此版本，目前无法升级到更高版本。如果没有，还有其他解决办法吗？对于UI引导，我们使用的是0.13.4是的，它应该与AngularJS 1.3.4一起使用，但我不能强调这一点：不要将UI引导与AngularJS一起使用。您需要使用AngularJS团队专门为AngularJS创建的版本。莱克斯：我完全理解你想说的话，但正如前面提到的，我们目前无法升级，所以我正在设法找到一个适合这个问题的解决方案。我用1.3.4尝试了您的解决方案，但不起作用。然后，我尝试了我的选项卡集使用您的一些更改，我能够取得一些进展和它的显示选项卡。但问题是，子选项卡显示为列表而不是选项卡，当我单击它们时，它就会消失。你能检查一下这里发生了什么吗：你丢失了第二个
元素。这是最新的。谢谢莱克斯。这解决了我现在的问题。我在这些选项卡中有一些表，用于绑定每个选项卡的数据。有一些问题，但如果需要的话，会发布一个单独的问题。Lex这样做适用于angularjs 1.3.4，因为我们正在使用这个版本，目前无法升级到更高的版本。如果没有，还有其他解决办法吗？对于UI引导，我们使用的是0.13.4是的，它应该与AngularJS 1.3.4一起使用，但我不能强调这一点：不要将UI引导与AngularJS一起使用。您需要使用AngularJS团队专门为AngularJS创建的版本。莱克斯：我完全理解你想说的话，但正如前面提到的，我们目前无法升级，所以我正在设法找到一个适合这个问题的解决方案。我用1.3.4尝试了你的解决方案，但是