时间戳

首页 > 解决方案 > 在 AngularJS 的选项卡上显示多个数据点的问题

angularjs - 在 AngularJS 的选项卡上显示多个数据点的问题

问题描述

我对 AngularJS 还是很陌生，所以为我遇到的问题寻找一些指导；我有一个 JSON 文件存储，我已成功从中读取数据，格式为：

{
"sites": [
    {
        "name": "S001",
        "description": "Joes's 1"
    },
    {
        "name": "S002",
        "description": "Fred"
    },
    {
        "name": "S003",
        "description": "John"
    },
... etc ...
    {
        "name": "S020",
        "description": "Mary"
    }
]

}

我正在尝试使用该md-tabs指令循环遍历它，在单个选项卡中一次显示 10 个项目；我已经使用下面的代码为每个项目工作（对不起，混乱的工作）：

    <md-tabs md-selected="selectedIndex"  style="border: 1px solid red; background-color: white; color: black;">
      <md-tab ng-repeat="site in sites.sites" md-on-select="onTabSelected(tab)">
        <md-tab-label>
          Tab {{ site.name }}
        </md-tab-label>
        <md-tab-body>
          {{ site.description }}
          <p>Length of Array: {{sites.sites.length}}</p>
          <p>Pages: {{ sites.sites.length / pageSize }} - ({{ currentPage }} of {{((4.9 + sites.sites.length) / pageSize | number:0)*1 }})</p>
        </md-tab-body>
      </md-tab>
    </md-tabs>

但是我正在努力寻找如何使标签读取“Tab1”、“Tab2”并且每页仅显示 10 条信息 - 这可能使用标签，还是我在错误的树上吠叫？

感谢。

标签： angularjstabs

解决方案

一般规则是以这种方式制作模型，共同视图尽可能简单。所以你想要一些带有网站的标签，好的：tabs: [{sites: [...]}, {sites: [...]}]

填写控制器：

vm.tabs = [];
let currentTab = null;
sites.forEach(site => {
  if (!currentTab || currentTab.sites.length > 9) {
    currentTab = {sites: []};
    vm.tabs.push(currentTab);
  }
  currentTab.sites.push(site);
})

现在你的html：

<md-tabs md-selected="selectedIndex">
   <md-tab ng-repeat="tab in tabs" md-on-select="onTabSelected(tab)">
      <md-tab-body>
          <div ng-repeat="site in tab.sites">{{ site.description }}</div>
...

推荐阅读