2016.05.05
AngularJS – STEP2
目次
モデルを使う
双方向データバインディング
・HTMLファイル
<!DOCTYPE html> <html id="AngularJsSample" ng-app="sample2"> <head> </head> <body></body> </html>
<div ng-cloak>初期値:{{::form1.variable}}</div> <div ng-cloak>暫定値:{{form1.variable}}</div>
・JavaScriptファイル:app.js
(function(){ //モジュールを定義する var app = angular.module('sample2',[]); //コントローラーを定義する app.controller('form1Controller', function(){ this.variable = variable; }); var variable = "initial@abc"; })();
・結果
フォームを作る
テキストタイプ
・HTML
<form name="form2" ng-controller="form2Controller as form2" novalidate></form>
・app.js
//コントローラーを定義する app.controller('form2Controller', function(){ //フォームで使用するモデルを用意する this.container = {}; });
・結果
セレクトボックス・ラジオボックス・チェックボックス
・HTML
<form name="form2" ng-controller="form2Controller as form2" novalidate></form>
・結果
参考文献
-
1)Shaping up with Angular.js(アクセス日:2016.5.5)
URL:http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
-
2)AngularJS アプリケーションプログラミング(2015年8月19日発売、山田祥寛 著、技術評論社)
URL:http://gihyo.jp/book/2015/978-4-7741-7568-3#summary