【问题标题】:How to give angular ui-grids with different data inside angular ui-bootstrap tabs?如何在 angular ui-bootstrap 选项卡内提供具有不同数据的 angular ui-grids?
【发布时间】:2015-12-05 05:39:07
【问题描述】:

我有多个选项卡,每个选项卡里面都有角度 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'}
     ]
    };  

【问题讨论】:

    标签: angularjs html angular-ui-grid angular-ui-bootstrap-tab


    【解决方案1】:

    如果一个网格在页面加载时加载而其他网格未加载,则基本上意味着 A) 其他选项卡在页面加载时未初始化 B) 网格初始化代码应在选项卡切换而不是页面加载 C) 文件或数据未在指定位置可用。

    我希望这会有所帮助。

    【讨论】:

    • 在页面加载时只会加载一个标签。当我导航到另一个选项卡时,我看不到网格。请提出一些建议。
    • 你能在这个@Syed 上提出什么建议吗?
    • @Kirti,您能否尝试将 JS 代码放入函数中,然后在页面加载和选项卡切换时调用它。如果出现网格,那么您必须在页面加载旁边的选项卡开关上调用此代码。如果网格仍然没有出现,那么要么您没有在该选项卡上放置网格,要么选项卡本身隐藏/重叠网格 UI。尝试检查 HTML 并查看网格是否真的存在。试试 z-index 放在前面。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-04
    • 1970-01-01
    • 1970-01-01
    • 2017-01-09
    相关资源
    最近更新 更多