首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >angular js中的迭代

angular js中的迭代
EN

Stack Overflow用户
提问于 2018-05-31 03:13:11
回答 1查看 99关注 0票数 0

我正在使用python flask开发angular js,我面临着在一个场景中迭代JSON的挑战。场景如下: JSON为:

代码语言:javascript
复制
{
    "categories": ["ladies", "men", "kids", "home", "sale", "life"],
    "home": [{
        "categories": "New Arrivals",
        "categoryTitle": "home"
    }],
    "kids": [{
        "categories": "New Arrivals",
        "categoryTitle": "Baby"
    }],
    "men": [...multiple nodes...],
    "ladies": [...multiple nodes...]
}

我想打印类别json中的数据,例如kids.categoryTitle,但我的类别名称来自同一json中的类别列表。

我想要打印的是:

代码语言:javascript
复制
<div ng-repeat="catName in ctrl.tableData.cats"><tr data-ng-repeat="(key, data) in ctrl.tableData.catName"></tr></div>

但是上面的代码不能正常工作,就像我使用ctrl.tableData.kids1 instead ofctrl.tableData.catName1一样。

谢谢你的帮忙

EN

回答 1

Stack Overflow用户

发布于 2018-05-31 03:32:26

这是您数据的一个工作示例,它从对象中读取类别名称,然后加载键的数据并循环它们

代码语言:javascript
复制
var app = angular.module("app", []);

app.controller("MainCtrl", function($scope) {
  $scope.data = {
    categories: ["ladies", "men", "kids", "home", "sale", "life"],
    home: [{
      categories: "New Arrivals",
      categoryTitle: "home"
    }],
    kids: [{
      categories: "New Arrivals",
      categoryTitle: "Baby"
    }]
  };
});
代码语言:javascript
复制
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
</head>

<body ng-controller="MainCtrl">
  <ul ng-repeat="d in data.categories">
    Category: {{d}}
    <br>
    Data:
    <li data-ng-repeat="k in data[d]">
      {{k}}
    </li>

    <hr>
  </ul>
</body>

</html>

!请勿将tr标记放入div标记中

另外,您的JSON没有cats数据。

更新

从您的数据创建多个表

代码语言:javascript
复制
var app = angular.module("app", []);

app.controller("MainCtrl", function($scope) {
  $scope.data = {
    categories: ["kids", "home"],
    home: [{
      categories: "home 1.1",
      categoryTitle: " home1.2"
    }, {
      categories: "home 2.1",
      categoryTitle: "home 2.2"
    }, {
      categories: "home 3.1",
      categoryTitle: "home 3.2"
    }, {
      categories: "home 4.1",
      categoryTitle: "home 4.2"
    }, {
      categories: "home 5.1",
      categoryTitle: "home 5.2"
    }],
    kids: [{
      categories: "kids 1.1",
      categoryTitle: "kids 1.2"
    }]
  };


  $scope.getKeys = function(obj) {
    if (!$scope.data.hasOwnProperty(obj)) {
      return [];
    }

    return Object.keys($scope.data[obj][0]);
  }
});
代码语言:javascript
复制
td {
  border: 1px solid black;
}
代码语言:javascript
复制
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <table ng-repeat="d in data.categories">
    <tr>
      <th ng-repeat="l in x = getKeys(d)" ng-if="l!= '$$hashKey'">
        {{l}}
      </th>
    </tr>
    <tr ng-repeat="k in data[d]">
      <td>{{k.categories}}</td>
      <td>{{k.categoryTitle}}</td>
    </tr>
  </table>
</body>

</html>

更新2

使用具有多个tbody的表

代码语言:javascript
复制
var app = angular.module("app", []);

app.controller("MainCtrl", function($scope) {
  $scope.data = {
    categories: ["kids", "home"],
    home: [{
        categories: "home 1.1",
        categoryTitle: " home1.2"
      },
      {
        categories: "home 2.1",
        categoryTitle: "home 2.2"
      },
      {
        categories: "home 3.1",
        categoryTitle: "home 3.2"
      },
      {
        categories: "home 4.1",
        categoryTitle: "home 4.2"
      },
      {
        categories: "home 5.1",
        categoryTitle: "home 5.2"
      }
    ],
    kids: [{
      categories: "kids 1.1",
      categoryTitle: "kids 1.2"
    }]
  };

  $scope.getKeys = function(obj) {
    if (!$scope.data.hasOwnProperty(obj)) {
      return [];
    }

    return Object.keys($scope.data[obj][0]);
  };
});
代码语言:javascript
复制
td {
  border: 1px solid black;
}
代码语言:javascript
复制
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <table>
    <tbody ng-repeat="d in data.categories">
      <tr>
        <th ng-repeat="l in x = getKeys(d)" ng-if="l!= '$$hashKey'">
          {{l}}
        </th>
      </tr>
      <tr ng-repeat="k in data[d]">
        <td>{{k.categories}}</td>
        <td>{{k.categoryTitle}}</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50611934

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档