【ng-if】空文字、空配列、nullの表示・非表示について -【付録】AngularJSの基本操作
【付録】AngularJSの基本操作
【ng-if】空文字、空配列、nullの表示・非表示について
前回の記事が少し物足りなかったので、付録と言う形で追記。
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
}
];
// 空文字this.emptyStr = '';
// null
this.nullStr = null;
// 空配列
this.emptyArrs = [
];
});
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-if="ctrl.emptyStr">空文字emptyStrを表示<br></p>
<p ng-if="!ctrl.emptyStr">空文字emptyStrを非表示<br></p>
<p ng-if="ctrl.nullStr">null（nullStr）を表示<br></p>
<p ng-if="!ctrl.nullStr">null（nullStr）を非表示<br></p>
<p ng-if="ctrl.emptyArrs">空配列emptyArrsを表示<br></p>
<p ng-if="!ctrl.emptyArrs">空配列emptyArrsを非表示<br></p>
</div>
</body>
</html>
index.htmlでは空文字、null、空配列をng-ifの後ろに指定した場合の表示について調べている。ブラウザで開いた結果は以下の通り。
空文字emptyStrを非表示
null（nullStr）を非表示
空配列emptyArrsは表示
表示結果が結論を表しているが、まとめると以下のようになる。
■空文字の場合は非表示（!ctrl.emptyStrのように「!」をつければ表示）
■nullの場合は非表示（!ctrl.nullStrのように「!」をつければ表示）
■空配列の場合は表示（!ctrl.emptyArrsのように「!」をつければ非表示）
以上
