Works by

Ren's blog

@rennnosuke_rk 技術ブログです

トップ > Javascript > 【AngularJS】Tableのセルをng-repeatで繰り返し表示する

【AngularJS】Tableのセルをng-repeatで繰り返し表示する

Javascript AngularJS

AngularJSのng-repeatを用いることで、セル要素一つ分のhtml記述で
Table内の全セルを描画することが可能。

test.js
// strictモード
"use strict";

// MainController
angular.module('MyApp', [])
.controller('MainController', ['$scope', function($scope) {

  // TableのItem
  $scope.items = ['item1', 'item2', 'item3'];

}]);
test.html

行を繰り返し描画

<!DOCTYPE html>
<html ng-app='MyApp'>
<head>
  <meta charset="utf-8" />
  <title>Title</title>
  <!-- Angular -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
</head>
<body ng-controller='MainController'>
  <table border="1">
    <!-- 行を繰り返し -->
    <tr ng-repeat='item in items'>
      <td>
        {{item}}
      </td>
    </tr>
  </table>
  <script src="../js/test.js"></script>
</body>
</html>


f:id:rennnosukesann:20180212222916p:plain

列を繰り返し描画

<!DOCTYPE html>
<html ng-app='MyApp'>
<head>
  <meta charset="utf-8" />
  <title>Title</title>
  <!-- Angular -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
</head>
<body ng-controller='MainController'>
  <table border="1">
    <tr>
      <!-- 列を繰り返し -->
      <td ng-repeat='item in items'>
        {{item}}
      </td>
    </tr>
  </table>
  <script src="../js/test.js"></script>
</body>
</html>


f:id:rennnosukesann:20180212223122p:plain

Controllerの$scopeに配列オブジェクトを登録し、
ng-repeat命令に登録した配列オブジェクトを繰り返すAngular式を記述する。

配列の長さ分だけng-repeat命令を記述したタグ配下の記述が繰り返し描画される。
配列の要素も上記htmlのように参照可能。