var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.txt1 = '';
$scope.txt2 = '';
$scope.onChange1 = function(txt1){
$scope.txt2 = txt1;
};
$scope.onChange2 = function(txt3){
$scope.txt4 = txt3;
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>通常</h1>
<div>
<input type="text" ng-model="txt1" ng-change="onChange1(txt1)" />
</div>
<p>txt1 (入力中の変数)<br />{{txt1}}</p>
<p>txt2 (changeイベントイベントで格納される値)<br />{{txt2}}</p>
<h1>ng-model-options="{updateOn: 'blur'}"</h1>
<div>
<input type="text" ng-model="txt3" ng-change="onChange2(txt3)" ng-model-options="{updateOn: 'blur'}" />
</div>
<p>txt1 (入力中の変数)<br />{{txt3}}</p>
<p>txt2 (changeイベントイベントで格納される値)<br />{{txt4}}</p>
</body>
</html>
/* Put your css in here */