У меня возникли проблемы с тем, чтобы содержимое моей вкладки отображалось правильно при загрузке страницы. У меня есть фабрика объектов под названием apiList, затем я использую два ng-repeats, один из которых попадает в каждый объект в apiList, а затем следующий, который выполняет итерацию через этот объект и помещает все свои данные на страницу. Я использую #tab{{$index}}, чтобы мои переключатели данных были выровнены между кнопками и вкладками.ng-repeat on bootstrap tab-content/tab-pane
Проблема связана с тем, как я использую атрибут active на своем tab-pane.
У меня есть три известных теста.
Я могу только получить информацию от первого объекта, используя условие
ng-class="{ 'active': $index == 0}"как в ..<div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}" ng-class="{ 'active': $index == 0}">
Если удалить условную от линии, то ничего не появляется
И если я просто добавлю
activeк значению панели (без условий) (т.е.<div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}">Все они появляются.
Так что моя проблема, кажется, с тем, как мне нужно, чтобы включить/выключить мой активный для нг-повтора, и я просто заблудиться.
Кроме того, нажатие на учетные записи/клиенты не обновляет вкладки. Они оба имеют правильные идентификаторы переключения данных (0 и 1) в отношении вкладок, поэтому я предполагаю, что это часть проблемы active. И всякий раз, когда я нажимаю на панели вкладок, они просто расширяются.
Здесь моя фабрика, ng-repeat (s) и код, который был моей первоначальной настройкой (функциональной).
завод
.factory('APIMethodService', [function() {
var Head = "api.verifyvalid";
return {
apis: [
{
accounts: [
{
parameters : [
{
name : "Accounts",
version : "1.0"
}
],
uri: Head + "/v1/accounts/account_number",
methods : [
{
name: "Account Number",
desc: "Returns the account number."
}, {
name: "Account Money",
desc: "Returns the monetary amount within the account."
}
]
},
{
parameters : [
{
name : "Accounts",
version : "2.0"
}
],
uri: Head + "/v2/accounts/account_number",
methods: [
{
name: "Account Number",
desc: "Returns the account number."
}, {
name: "Account Money",
desc: "Returns the monetary amount within the account."
}, {
name: "Account Token",
desc: "Returns the account's token."
}
]
}
],
customers:[
{
parameters : [
{
name : "Customers",
version : "1.0"
}
],
uri: Head + "/v1/customers/customer_number",
methods : [
{
name: "Customer Name",
desc: "Returns the customer's name."
}, {
name: "Customer ID",
desc: "Returns the customer's ID."
}
]
},
{
parameters : [
{
name : "Customers",
version : "2.0"
}
],
uri : Head + "/v2/customers/customer_number",
methods: [
{
name: "Customer Name",
desc: "Returns the customer's name."
}, {
name: "Customer ID",
desc: "Returns the customer's ID."
}, {
name: "Customer Email",
desc: "Returns the customer's email."
}
]
}
]
}
]
};
нг-повтор (только правая вкладки)
<div class="col-md-9">
<div class="tab-content">
<div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}">
<div ng-repeat="api in apiList[0][key]">
<div class="panel panel-info" id="panel{{$index}}">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapse{{key}}{{$index}}" class="collapsed">
{{api.uri}}<i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
</a>
</h4>
</div>
<div id="collapse{{key}}{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr ng-repeat="method in api.methods">
<td>{{method.name}}</td>
<td>{{method.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Следующий код является то, что я изначально имел, прежде чем пытаться грызть его вниз и т.д.
<div class="col-md-9" style="display:none">
<div class="tab-content">
<!-- Accounts -->
<div class="tab-pane active" id="tab0">
<div ng-repeat="api in apiList[0].accounts">
<div class="panel panel-info" id="panel0">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseAccountsV{{$index}}" class="collapsed">
{{api.uri}}
</a>
<i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
</h4>
</div>
<div id="collapseAccountsV{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr ng-repeat="method in api.methods">
<td>{{method.name}}</td>
<td>{{method.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Customers -->
<div class="tab-pane" id="tab1">
<div ng-repeat="api in apiList[0].customers">
<div class="panel panel-info" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseCustomersV{{$index}}" class="collapsed">
{{api.uri}}<i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
</a>
</h4>
</div>
<div id="collapseCustomersV{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr ng-repeat="method in api.methods">
<td>{{method.name}}</td>
<td>{{method.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Other -->
<div class="tab-pane fade" id="tab3">
<!-- TBA -->
</div>
</div>
</div>
Пожалуйста, ответьте на вопрос своим решением или удалите вопрос. Мы не делаем ** РЕШЕННО ** здесь. – j08691
@ j08691 Что вы посоветуете, я не против удаления, но не был, если человек, который поддержал это было просто любопытно или также имел проблему. Прости! :( – Austin
Это хорошо. Вы можете разместить свое решение в качестве ответа, как и любой другой, и вы тоже можете его принять (но вы не получите очков). – j08691