複数のタブがあり、それぞれに角度のある ui-grid があります。各グリッドは異なるデータを表示する必要があります。しかし、あるタブではデータがページの読み込み時にグリッドに表示されるが、別のタブでは ui-grid 自体が読み込まれないという問題に直面しています。何が問題なのかわかりません。助けてください。以下はコードのサンプルです。
<uib-tabset class="nav">
<uib-tab heading="User">
<div ng-include="'./public/partials/tabs/user.html'">
</div>
</uib-tab>
<uib-tab heading="Notes">
<div ng-include="'./public/partials/tabs/notifications.html'">
</div>
</uib-tab>
<uib-tab heading="Assets">
<div ng-include="'./public/partials/tabs/assetsList.html'"></div>
</uib-tab>
<uib-tab heading="Audit Logs">
<div ng-include="'./public/partials/tabs/audit.html'" >
</div>
</uib-tab>
</uib-tabset>
タブの HTML:
<div class="container-fluid">
<form name="assetsForm" novalidate class="form-horizontal">
<div class='container-fluid containerborder'>
<br>
<!--creating table-->
<div data-ui-grid="assetsOptions" data-ui-grid-pagination></div>
</div>
</form>
</div>
<div class="container-fluid">
<form name="userForm" novalidate class="form-horizontal">
<div class='container-fluid containerborder'>
<br>
<!--creating table-->
<div data-ui-grid="userOptions" data-ui-grid-pagination></div>
</div>
</form>
</div>
コントローラー部:
$scope.data = [
{ name: 'Alex', car: 'Toyota' },
{ name: 'Sam', car: 'Lexus' },
{ name: 'Joe', car: 'Dodge' },
{ name: 'Bob', car: 'Buick' },
{ name: 'Cindy', car: 'Ford' },
];
$scope.userOptions = {
data: 'data',
paginationPageSizes: [5, 10, 25],
paginationPageSize: 5,
columnDefs: [
{name: 'name'},
{name: 'car'}
]
};
$scope.assetsData = [
{ table: 'Brian', class: 'Audi' },
{ table: 'Malcom', class: 'Mercedes Benz' },
{ table: 'Dave', class: 'Ford' },
{ table: 'Stacey', class: 'Audi' },
{ table: 'Amy', class: 'Acura' },
{ table: 'Scott', class: 'Toyota' },
{ table: 'Ryan', class: 'BMW' },
];
$scope.assetsOptions = {
data: 'data',
paginationPageSizes: [5, 10, 25],
paginationPageSize: 5,
columnDefs: [
{name: 'table'},
{name: 'class'}
]
};