AngularJSで入力値による条件分岐方法について

AngularJSで質問です。

lang
1<html>
2<head>
3<meta charset="utf-8">
4<title>SAMPLE</title>
5</head>
6<body>
7
8<div ng-app>
9	<div><input type="text" ng-model="value1">円</div>
10	<div ng-init="value1='0'">獲得できるポイントは★{{value1}}★ポイントです。</div>
11</div>
12<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
13
14</body>
15</html>

上記ソースで
inputに入力された値が1000円未満ならx1倍のポイント、
inputに入力された値が1000円以上ならx10倍のポイントを
★～★で囲まれたエリアに表示するようにしたいです。

のところを

{{

if(value1<1000){
value1;
}else if(value1<=1000) {
value1*10;
}

}}

のようなイメージで出来たらいいなと思うのですが、
AngularJSでこのような実装をすることは可能でしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

htmlにそのまま書くのは無理だと思われます。

htmlに書く場合はng-showで表示の条件付けをする事ができますので、下記のような記述で実現できます。
<span ng-show="value1 <= 1000">{{value1}}<span>
<span ng-show="value1 > 1000">{{value1*10}}<span>

もしくわコントロールなどで関数化してしまえば、
{{getPoint(value1)}}
のような記述でポイント取得できます。

Angularjsで指定できる式(expression)については下記などを参考にしてみてください。
https://docs.angularjs.org/guide/expression

投稿2015/06/15 10:35