Question

我正在使用python flask处理角度js，我在一个场景中面临一个挑战，即迭代JSON。方案如下： JSON是：

{
    "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中的类别列表中动态传递的。

我试图打印的是：

<div ng-repeat="catName in ctrl.tableData.cats"><tr data-ng-repeat="(key, data) in ctrl.tableData.catName"></tr></div>

但上面的代码无效，就像我使用ctrl.tableData.kids1 instead of ctrl.tableData.catName1一样。

感谢您的帮助

Answer 1

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

＆＃13;

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"
    }]
  };
});

＆＃13;

<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>

＆＃13;

！不要将tr标记放在div标记内

此外，您的JSON没有cats数据。

<强>更新

从您的数据制作多个表

＆＃13;

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]);
  }
});

＆＃13;

td {
  border: 1px solid black;
}

＆＃13;

<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>

＆＃13;

更新2

使用包含多个tbody

的表格

＆＃13;

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]);
  };
});

＆＃13;

td {
  border: 1px solid black;
}

＆＃13;

<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>

＆＃13;

角度js中的迭代

1 个答案: