Как создать угловые пользовательские сетки с различными данными внутри угловых вкладок пользовательского интерфейса?

0

У меня есть несколько вкладок, и у каждого из них есть угловая ui-сетка внутри. Каждая сетка должна отображать разные данные. Но я столкнулся с проблемой, как в одной вкладке данные поступают в сетку при загрузке страницы, но на другой вкладке сама ui-сетка не загружается. Не получается, в чем проблема. Пожалуйста помоги. Ниже приведен образец кода:

<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'}
     ]
    };  
Теги:
angular-ui-grid
angular-ui-bootstrap-tab

1 ответ

0

Если одна сетка загружается при загрузке страницы, а другие нет, в основном это означает, что A) другие вкладки не инициализируются при загрузке страницы. B) код инициализации сетки должен быть в переключателе табуляции, а не на загрузке страницы. C) файл или данные недоступны в указанных место нахождения.

Я надеюсь, это поможет.

  • 0
    При загрузке страницы будет загружена только одна вкладка. Когда я перехожу на другую вкладку, я не могу видеть сетку. Пожалуйста, предложите что-нибудь.
  • 0
    Вы можете предложить что-нибудь об этом @Syed?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню