The sky is the limit

ハイブリッドアプリ開発、人工知能(機械学習など)に関する備忘録 たまに宇宙のことも語る【AngularJS、Monaca、Cordova、OnsenUI】

【ng-if】空文字、空配列、nullの表示・非表示について -【付録】AngularJSの基本操作

【付録】AngularJSの基本操作

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

【ng-if】空文字、空配列、nullの表示・非表示について

 

前回の記事が少し物足りなかったので、付録と言う形で追記。

it-innovation.hatenablog.com

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>

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

index.htmlでは空文字、null、空配列をng-ifの後ろに指定した場合の表示について調べている。ブラウザで開いた結果は以下の通り。

 

空文字emptyStrを非表示

null(nullStr)を非表示

空配列emptyArrsは表示

 

表示結果が結論を表しているが、まとめると以下のようになる。

 

■空文字の場合は非表示(!ctrl.emptyStrのように「!」をつければ表示)

■nullの場合は非表示(!ctrl.nullStrのように「!」をつければ表示)

■空配列の場合は表示(!ctrl.emptyArrsのように「!」をつければ非表示)

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

以上