The sky is the limit

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

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

【連載】AngularJSの基本操作

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

3-1.【ng-if】条件に応じて表示を変化させる①


前回は「ng-Repeat」を使って、配列の中身をループさせて表示させる方法についてまとめた。

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
    }
  ];
});

 

 data.jsについては前回と同様のものを利用。文字列「str」と配列「arrs」を持つコントローラを定義している。

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" 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についてもう少し掘り下げているので、興味があればどうぞ。

it-innovation.hatenablog.com

 

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

以上。