<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>その1</title>
<meta charset="UTF-8" />
<!-- AngularJSをCDNで利用する場合の魔法の言葉 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<!-- ちょっとだけ見栄えをよくするためのBootStrap-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!-- ViewとModelのデータを橋渡しするコントローラー-->
<body ng-controller="MyController">
<!-- <h1>デモその1</h1> -->
<div class="container-fluid bg-default">
<div class="panel panel-primary">
<div class="panel-heading">
ViewとModelの同期
</div>
<div class="panel-body">
<div ng-non-bindable>
<p>・テキストボックに入力された値が即時的にModelに同期されます。</p>
テキストボックスにnameというモデルを紐づけし「こんにちは、{{name}}さん!」と記述してViewに表示しています。
<br /> テキストボックスに名前を入力→ こんにちは、○○さん!の○○部分に反映されます。
</div>
<form>
<div class="content">
<label for="name">名前:</label>
<!-- テキストボックスの値をデータに紐づけ ng-model="name"-->
<input id="myName" name="myName" type="text" ng-model="name" ng-change="changeName()" />
<!-- テキストボックスが更新されるとAngularが自動でModelとViewを同期します-->
<p>こんにちは、{{name}}さん!</p>
</div>
<p>テキストボックスに入力された数字を画面上で加算して表示しています。</p>
<div class="content">
<input id="num1" name="num1" type="number" ng-model="num1" /> +
<input id="num2" name="num2" type="number" ng-model="num2" /> = {{num1 + num2}}
</div>
</form>
</div>
</div>
</div>
</body>
</html>
/* Styles go here */
.content{
margin: 20px;
}
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
//モデルに初期値を入力することも可能
//$scope.name = '名無し';
$scope.changeName = function(){
if(angular.equals($scope.name,"maki")){
alert('監視してますよ ' + $scope.name + 'さん')
}
}
}]);