LoginSignup
15
15

More than 5 years have passed since last update.

AngularJS ng-repeatをネストする

Posted at
  • 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"
    }
  ];
}
15
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
15