Question

我对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条信息的方法-使用选项卡是否可行？还是我叫错了树？ >

谢谢。

Answer 1

一般规则是以这种方式创建模型，共同视图尽可能简单。因此，您需要一些带有网站的标签，确定：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>
...

Answer 2

好吧，我最终走了一条不同的路；使用JSON列表，我通过使用长度+ 4.9（将其带到下一个整数）并通过number过滤器来计算范围从1到n：来计算出最高的页面：

    <span style="width:120px; display: inline-block;">
        <md-select ng-model="pageStart">
          <md-option ng-repeat="n in range(1,((4.9 + sites.sites.length) / pageSize | number:0)*1)" ng-value="{{( n * pageSize ) - pageSize }}">Page {{n}}</md-option>
        </md-select>
      </span>

然后，ng-value将页码绑定到所选的下拉选项，该选项随后在ng-repeat中用作主循环的起点：

    <div class="table" ng-repeat="site in sites.sites | limitTo: pageSize : pageStart">

然后每页显示正确的项目数。

希望可以帮助将来需要做类似事情的人。

在AngularJS中的选项卡上显示多个数据点时出现问题

2 个答案: