AngularJSの基礎を理解しよう (5/5)
作成:2015-12-05 09:07
更新:2015-12-05 09:07
更新:2015-12-05 09:07
■位置と大きさをリアルタイムの操作する
では、モデルとマークアップの利用例として、表示されているDOMの位置や大きさをリアルタイムに操作するサンプルを作ってみましょう。
下にリストを掲載しておきます。４つあるフィールドの値を操作して変えると、リアルタイムに赤い四角形の位置や大きさが変わります。
ここでは、まず<body>のところで値の初期化を行っています。
複数の初期化処理を用意したいときは、こんな具合にセミコロンで区切って記述できます。要するに、JavaScriptのコードを書いているだけなんですね。
<input type="number">にng-modelを用意するのは、もうわかりますね。これでそれぞれの入力された値が、x, y, w, hといったものに保管されます。そして、これらの値を元に四角形の<div>の表示が設定されます。
{{}}によるマークアップは、こんな具合にstyle属性の値の中に埋め込むこともできます。マークアップは、HTMLのどこにでも書けるのです。そしてその値を操作可能にします。
いかがですか。まだ、JavaScriptのコードはほとんど書いていませんが（変数の初期化文だけ）、それでもいろいろ面白いことができそうでしょう？ モデルとマークアップを使って、実際にHTMLのいろいろな値を操作してみましょう。
下にリストを掲載しておきます。４つあるフィールドの値を操作して変えると、リアルタイムに赤い四角形の位置や大きさが変わります。
ここでは、まず<body>のところで値の初期化を行っています。
<body ng-init="x = 100;y = 100; w = 100;h = 100">
複数の初期化処理を用意したいときは、こんな具合にセミコロンで区切って記述できます。要するに、JavaScriptのコードを書いているだけなんですね。
<input type="number">にng-modelを用意するのは、もうわかりますね。これでそれぞれの入力された値が、x, y, w, hといったものに保管されます。そして、これらの値を元に四角形の<div>の表示が設定されます。
<div id="rect" style="left:{{x}}px;top:{{y}}px;width:{{w}}px;height:{{h}}px">{{}}によるマークアップは、こんな具合にstyle属性の値の中に埋め込むこともできます。マークアップは、HTMLのどこにでも書けるのです。そしてその値を操作可能にします。
いかがですか。まだ、JavaScriptのコードはほとんど書いていませんが（変数の初期化文だけ）、それでもいろいろ面白いことができそうでしょう？ モデルとマークアップを使って、実際にHTMLのいろいろな値を操作してみましょう。
(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>
<style>
#rect {
background-color:red;
position:absolute;
}
</style>
</head>
<body ng-init="x = 100;y = 100; w = 100;h = 100">
<div>
x:<input type="number" min="0" max="300" ng-model="x" size="5">
y:<input type="number" min="0" max="300" ng-model="y" size="5">
w:<input type="number" min="0" max="300" ng-model="w" size="5">
h:<input type="number" min="0" max="300" ng-model="h" size="5">
</div>
<div id="rect" style="left:{{x}}px;top:{{y}}px;width:{{w}}px;height:{{h}}px">
</div>
</body>
</html>
※関連コンテンツ