The sky is the limit

ハイブリッドアプリ開発、PWAなど効率の良いiOSアプリ、Androidアプリ開発の情報を共有したい。アプリ開発は楽しい。【PWA、AngularJS、Monaca、Cordova、OnsenUI】

2.【ng-Repeat】データをループさせて表示する - 【連載】AngularJSの基本操作

【連載】AngularJSの基本操作

f:id:duo-taro100:20160218004611p:plain

2.【ng-Repeat】データをループさせて表示する

前回はデータモデルをビューへ表示する方法をまとめた。今回はデータが配列などの場合に、それをループさせて表示させる方法をまとめる。

使うのは「ng-Repeat」

 

<前回までの記事>

it-innovation.hatenablog.com


準備するファイル構造については前回までと同様なので、わからない場合はこちらを参照。

 

■配列をループさせないで表示させた場合の実験

まずは実験で、配列を持つプロパティをそのまま表示させるとどうなるか。

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="js/data.js"></script>
</head>
<body>
<div ng-controller="MyCtrl as ctrl">
<p>{{ctrl.arrs}}</p>
</div>
</body>
</html>

data.js

var myapp = angular.module('myApp',[]);
myapp.controller('MyCtrl',function(){

this.str = 'Hello World!';
this.arrs = [
  {
    name:"kobayashi",
    score:24
  },

  {
    name:"kikuchi",
    score:18
  },
  {
    name:"yamada",
    score:87
  }
];
});

 data.js内で「arrs」は配列を持っている。

上記のindex.htmlだと、以下のように配列がそのまま表示されてしまう。

 

[{"name":"kobayashi","score":24},{"name":"kikuchi","score":18},{"name":"yamada","score":87}]

 

実際に使う場合には、この配列をループの中で扱って表示する、と言ったことが多いと思う。

f:id:duo-taro100:20160322234907p:plain

■ループ処理の実装

index.html修正後

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ループ文</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="js/data.js"></script>
</head>
<body>
<div ng-controller="MyCtrl as ctrl">
<p ng-Repeat="arr in ctrl.arrs">名前:{{arr.name}}<br>点数:{{arr.score}}<br></p>
</div>
</body>
</html>

 

これで、画面を表示させると以下のようになる。(data.jsは変更しない)

名前:kobayashi
点数:24

名前:kikuchi
点数:18

名前:yamada
点数:87

 

f:id:duo-taro100:20160218005810j:plain

■修正箇所の説明

修正箇所は3つ。青色の 

<meta charset="UTF-8">
<title>ループ文</title>

 に関しては、文字化け防止などのために追加したので、本題とは無関係。

<p ng-Repeat="arr in ctrl.arrs">名前:{{arr.name}}<br>点数:{{arr.score}}<br></p>

 上記の部分が、今回のメインで配列の中身をループさせて表示を行っている。以下に詳しい説明を書いていく。

 

ng-Repeat="arr in ctrl.arrs"

 ここは、data.jsで定義したarrsという配列がなくなるまで、一つずつarrに入れて処理を行う、という意味。元のデータ(今回は「arrs」)の前にはコントローラ名(「MyCtrl as ctrl」の「ctrl」)をつけるのを忘れずに。

 

名前:{{arr.name}}<br>点数:{{arr.score}}<br>

 

ここでは、arrに入っているデータを表示している。これは前回までの連載で説明したことなので、大丈夫だと思う。arrは(arrsのデータを一つずつ入れているので、)以下のようなデータを持っていることになる。

 

ループ1回目

 arr = 

{
   name:"kobayashi",
   score:24
}

 

ループ2回目

arr = 

{
   name:"kikuchi",
   score:18
}

 

ループ3回目

arr = 

{
   name:"yamada",
   score:87
}

なので、「arr.name」や「arr.score」でそれぞれの値にアクセスできる。

 

配列のデータをループさせて表示する方法についてはここまで。次回は、「ng-if」「ng-show」「ng-hide」などを使って条件分岐の実装をまとめる。

 

f:id:duo-taro100:20160214124138j:plain

以上!