More than 5 years have passed since last update.

AngularJS　ng-repeatをネストする

Angular

Posted at 2014-05-21

Object の key 名は、(key, value)で取得できる

sample.html

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <title>AngularJS　ng-repeatをネストする</title>
  <script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
  <script src="sample.js"></script>
</head>
<body>
<h1>AngularJS　ng-repeatをネストする</h1>
<div ng-controller="SampleCtrl">
  <div ng-repeat="item in data">
    <h2>{{item.name}}</h2>
    <div ng-repeat="(key, value) in item">
      <h3>{{key}}</h3>
      <p>{{value}}</p>
    </div>
  </div>
</div>
</body>
</html>

sample.js

function SampleCtrl($http, $scope) {
  $scope.data = [
    {
      "name": "API NAME1",
      "synopsis": "SYNOPSIS1",
      "usage": "USAGE1",
      "param": "PARAM1"
    },
    {
      "name": "API NAME2",
      "synopsis": "SYNOPSIS2",
      "usage": "USAGE2",
      "param": "PARAM2"
    }
  ];
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

AngularJS ng-repeatをネストする

AngularJS　ng-repeatをネストする