AngularJSの基礎を理解しよう (4/5)
作成:2015-12-05 09:05
更新:2015-12-05 09:05
更新:2015-12-05 09:05
■初期化と計算
では、これをもう少し拡張して、少し使えそうなものを作ってみましょう。
下のリスト欄は、消費税の計算を行うサンプルです。フィールドに金額を入力すると、税込み（８％の税）の金額が下に表示されます。また、金額が1万円以上になると、金額表示がボールドになります。
今回は、新しいディレクティブが１つ追加されています。それは以下の部分です。
この「ng-init」というディレクティブは、モデルの初期化を行うためのものです。これを用意しておくことで、モデルの値が指定の値に初期化されるようになります。
値を表示するマークアップの部分も少し変わっていますね。今回は、こんな感じで値を表示しています。
このようにマークアップには、式を設定することもできます。これにより計算結果が自動的に表示されるようになります。簡単でいいですね。
式を使ったマークアップは、よく見るともう1箇所あります。結果を表示している<p>タグの部分です。
num > 10000は、numの値が10000以上ならtrue、未満ならfalseになります。これに700をかけると、真偽値の値（trueまたは false）は整数の値（1または0）にキャストされ、1 * 700あるいは0 * 700になります。で、「10000以上ならボールド表示」となるわけです。
単に簡単な計算だけしかできなくても、こんな具合に面白いことができるんですね。
下のリスト欄は、消費税の計算を行うサンプルです。フィールドに金額を入力すると、税込み（８％の税）の金額が下に表示されます。また、金額が1万円以上になると、金額表示がボールドになります。
■初期化処理について
今回は、新しいディレクティブが１つ追加されています。それは以下の部分です。
<body ng-init="num = 100">
この「ng-init」というディレクティブは、モデルの初期化を行うためのものです。これを用意しておくことで、モデルの値が指定の値に初期化されるようになります。
■式の利用
値を表示するマークアップの部分も少し変わっていますね。今回は、こんな感じで値を表示しています。
you typed: {{num * 1.08}}.このようにマークアップには、式を設定することもできます。これにより計算結果が自動的に表示されるようになります。簡単でいいですね。
式を使ったマークアップは、よく見るともう1箇所あります。結果を表示している<p>タグの部分です。
<p style="font-weight:{{(num >= 10000) * 700}}">num > 10000は、numの値が10000以上ならtrue、未満ならfalseになります。これに700をかけると、真偽値の値（trueまたは false）は整数の値（1または0）にキャストされ、1 * 700あるいは0 * 700になります。で、「10000以上ならボールド表示」となるわけです。
単に簡単な計算だけしかできなくても、こんな具合に面白いことができるんですね。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!doctype html>
<html ng-app>
<head>
<title>AngularJS Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-init="num = 100">
<div>
<p>price:<input type="text" ng-model="num"></p>
<p style="font-weight:{{(num >= 10000) * 700}}">
you typed: {{num * 1.08}}.</p>
</div>
</body>
</html>
※関連コンテンツ