Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

トップ > 3-2.【ng-show】条件に応じて表示を変化させる② - 【連載】AngularJSの基本操作

3-2.【ng-show】条件に応じて表示を変化させる② - 【連載】AngularJSの基本操作

【連載】AngularJSの基本操作

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

3-2.【ng-show】条件に応じて表示を変化させる②

前回は条件によって表示を変化させる「ng-if」についてまとめた。

it-innovation.hatenablog.com

今回は以下の観点で「ng-show」の動きを細かくまとめていく。

・空文字の表示

・nullの表示

・空配列の表示

・trueの表示

・falseの表示

もともと「ng-show」はtrueであれば表示、falseであれば非表示だけど、空文字などはどうなるのかを実験してみる。

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

早速ソースコード。

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 = '';

this.nullStr = null;

this.emptyArrs = [

];

this.tBool = true;

this.fBool = false;
});

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>ng-show</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">
   <h3>ng-showの表示条件</h3>
     <p ng-show="ctrl.emptyStr">空文字emptyStrを表示<br></p>
     <p ng-show="!ctrl.emptyStr">空文字emptyStrを非表示<br></p>
     <p ng-show="ctrl.nullStr">null（nullStr）を表示<br></p>
     <p ng-show="!ctrl.nullStr">null（nullStr）を非表示<br></p>
     <p ng-show="ctrl.emptyArrs">空配列emptyArrsを表示<br></p>
     <p ng-show="!ctrl.emptyArrs">空配列emptyArrsを非表示<br></p>
     <p ng-show="ctrl.tBool">boolean「true」を表示<br></p>
     <p ng-show="!ctrl.tBool">boolean「true」を非表示<br></p>
     <p ng-show="ctrl.fBool">boolean「false」を表示<br></p>
     <p ng-show="!ctrl.fBool">boolean「false」を非表示<br></p>
  </div>
</body>
</html>

これを表示すると結果は以下の通り

ng-showの表示条件

空文字emptyStrを非表示

null（nullStr）を非表示

空配列emptyArrsを表示

boolean「true」を表示

boolean「false」を非表示


つまり「ng-show」の表示条件は

空文字は非表示
nullは非表示
空配列は表示
trueは表示
falseは非表示

ということ。

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

次回は「3-2.【ng-hide】条件に応じて表示を変化させる③ - 【連載】AngularJSの基本操作」
以上。