<!DOCTYPE html>
<html lang="en" ng-app="HelloApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table ng-controller="WorldController">
<tr>
<td>用户名</td>
<td><input type="text" ng-model="user.username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" ng-model="user.password"></td>
</tr>
<tr>
<td></td>
<td><input type="button" ng-click="login()" value="登录"></td>
</tr>
<tr>
<td></td>
<td><input type="text" ng-model="user.message"></td>
</tr>
</table>
<script src="./js/Angular.js"></script>
<!-- 第一个参数是这个模块的名字 第二个参数是模块所依赖的模块 -->
<script>
var app = angular.module('HelloApp', []);
//勇于创建一个控制器
//创建一个控制器 属于myApp模块
//传一个参数是获取 传两个参数是创建 会根据参数名称传递对象 所以要保证准确
app.controller('WorldController', ['$scope', function($scope) {
//当控制器执行会自动执行的函数
/* $scope.username='';
$scope.password=''; */
$scope.user = {
username: '',
password: ''
};
//行为数据
$scope.login = function() {
//因为数据的变化是双向的同步 所以界面上的值变化会同步大屏scope
console.log($scope.user)
};
//监视模型的变化
$scope.message = '请输入用户名'
$scope.$watch('user.username', function(now, old) {
console.log('now is' + now);
console.log('old is' + old);
if (now) {
if (now.length < 7) {
$scope.message = '输入格式不合法'
} else {
$scope.message = '';
}
} else {
$scope.message = '请输入用户名';
}
})
}])
</script>
</body>
</html>
运行结果
