【連載】AngularJSの基本操作
3-1.【ng-if】条件に応じて表示を変化させる①
前回は「ng-Repeat」を使って、配列の中身をループさせて表示させる方法についてまとめた。
今回は「ng-if」を使って条件に応じた表示変化についてまとめていく。
ファイル構造は前回通り。
早速サンプルコード
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については前回と同様のものを利用。文字列「str」と配列「arrs」を持つコントローラを定義している。
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" ng-if="arr.score < 50">名前：{{arr.name}}<br>点数：{{arr.score}}<br></p>
</div>
</body>
</html>
今回の本題は以下の部分。
<p ng-Repeat="arr in ctrl.arrs" ng-if="arr.score < 50">名前：{{arr.name}}<br>点数：{{arr.score}}<br></p>
「ng-Repeat」については前回説明したので割愛。
2.【ng-Repeat】データをループさせて表示する - 【連載】AngularJSの基本操作 - The sky is the limit
ng-if="arr.score < 50"
この部分がなければ上記リンクでやったように、以下の内容が表示される。
名前：kobayashi
点数：24
名前：kikuchi
点数：18
名前：yamada
点数：87
「ng-if="arr.score < 50"」の箇所を加えることで表示を変えている。結果は以下の通り。
名前：kobayashi
点数：24
名前：kikuchi
点数：18
今回でいうと配列が持つscoreプロパティの値が50よりも低いものだけを表示させるという条件になっているので
名前：yamada
点数：87
の部分は表示されていない。このようにng-ifの後ろに書いた条件を満たせば表示、満たさないものは表示しない、というようになっている。
以下のリンクでng-ifについてもう少し掘り下げているので、興味があればどうぞ。
以上。
