今回は、AngularJSのコントローラでの変数とHTML(テンプレート)の変数型に着目してみようと思います。
参考サイトはこちらです。
Number型
単純に数値型の扱い方です。しかし、JSでのデータ型はコード上では、とても曖昧なので注意しながらやります。
とりあえずはコードを見ます。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h3>数値の扱い</h3>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
</body>
</html>
実行結果は下の様になりました。
しかし、これではいまいちよくわからないので、前回作成したものをカスタムして下の様に作って見ました。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
quantity: <input type="text" ng-model="quantity"><br>
cost: <input type="text" ng-model="cost"><br>
label color: <input type="text" ng-model="myCol"><br/>
<br>
<label style="background-color:{{myCol}}">
Full Name: {{firstName + " " + lastName}}
</label>
<h3>数値の扱い</h3>
<p>{{quantity}} * {{cost}} = {{ quantity * cost }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
$scope.myCol = "lightblue";
// 数値の扱い
$scope.quantity = 1;
$scope.cost = 1;
});
</script>
</body>
</html>
やっぱり$scope.XXXの様に変数を用意してその中に数値を代入してやるということです。これを文字列にすると。。。
文字列の扱い
文字列の場合は、初めの方にやりました。実行結果は下のものになります。
コードは下の様になります。
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
結局は変数に文字列を代入するか、数値を代入するかで扱い方が変わってくるということです。
JSの基本
数値は計算することができます。
var num = 2; var result = 1 + num;
文字列は計算できません。
var num = 'moji'; var result 1 + 'moji'; // "1moji"と表示
下のはchromeの開発ツールでテストしたものです。
こんな感じで、実装ができます。Angularのポイントが少しずつわかってきました。
## 今迄のまとめ
主要な部品(Angularを使うためのもの)には以下のものがある
1. モジュールvar app = angular.module('myApp', []);
2. コントローラーapp.controller('myCtrl', function($scope) { // 処理内容 }
そして、「$scope」のプロパティ$scope.XXXのXXXがHTMLでの変数名に使用できる({{XXX}})というところがわかってきました。
でわでわ。。。
