Angularjs实现简单的登陆框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.js"></script>
<script>
//创建模块 模块名称 mymodule
var mymodule = angular.module("mymodule", []);
//创建控制器 myloginCon 标准的创建控制器的写法["$scope", function ($scope) {}]防止在代码压缩的时候出现问题
mymodule.controller("myLoginCon", ["$scope", function ($scope) {
//参数,将参数封装在一个对象中
$scope.user = {userName: "", password: ""};
//在没有任何输入的时候提示,请输入用户名
$scope.message = "请输入用户名";
//$watch函数监听模型数据的变化
//第一个参数:要监听的变化的参数
//第二个参数:是一个回调函数,两个参数分别为现在的值,之前的值
$scope.$watch("user.userName", function (now, old) {
//console.log("now现在的数据为:"+now);
//console.log("old原来的数据为:"+old);
if (now) {//用户有输入
if (now.length < 7) {
$scope.message = "请输入大于6位的用户名";
} else {
$scope.message = "";//输入合法后清空提示信息
}
} else {
$scope.message = "请输入用户名";//用户没有输入,提示输入 }
});
//功能,在这里不用将参数传进去
$scope.login = function () {
console.log("登陆的用户名为:" + $scope.user.userName);//获取输入的用户名
console.log("登陆的用户名为:" + $scope.user.password);//获取输入的密码
};
}]); </script>
</head>
<body>
<div ng-app="mymodule" ng-controller="myLoginCon">
<p><input type="text" ng-model="user.userName"></p>
<!--ng-model实现数据双向绑定-->
<p><input type="password" ng-model="user.password"></p>
<!--执行登陆-->
<p><input type="button" ng-click="login()" value="登陆"></p>
<!--提示信息-->
<p>{{message}}</p> </div>
</body>
</html>
Angularjs实现简单的登陆框的更多相关文章
- 使用QT实现一个简单的登陆对话框（纯代码实现C++）
使用QT实现一个简单的登陆对话框(纯代码实现C++) 效果展示 使用的QT控件 控件 描述 QLable 标签 QLineEdit 行文本框 QPushButton 按扭 QHBoxLayout 水平 ...
- AngularJs最简单解决跨域问题案例
AngularJs最简单解决跨域问题案例 2016-05-20 09:18 82人阅读 评论(0) 收藏 举报 分类: javascript(1) 作者:白狼 出处:http://www.mank ...
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
- [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架
MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...
- 使用jQuery实现简单的tab框
html代码 <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta ...
- bootstrap 一个简单的登陆页面
效果如图:用bootstrap 写的一个简单的登陆 一.修改样式 样式可以自己调整,例如换个背景色之类的,修改 background-color属性就可以 #from { background-col ...
- tkinter做一个简单的登陆页面
做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...
- 初学html，任务2：写一个简单的登陆/注册界面
先在body中把最基础的标签写出来 现在页面运行出来是这样的 就是一个没有任何样式的基础界面: 接下来我们为这些标签加上样式 首先还是让页面所有元素的padding和margin都设置为0, 清除浏览 ...
- tkinter做一个简单的登陆页面（十六）
做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...
随机推荐
- Oracle -操作数据库
删除数据: delete:用delete删除记录,Oracle系统会产生回滚记录,所以这种操作可以使用ROLLBACK来撤销 truncate:删除数据时,不会产生回滚记录.所以执行速度相对较快些 可 ...
- 同步架构OR异步架构
把智能系统比喻成KFC营业厅,处理器是窗口和窗口后面的服务员(把一个窗口当作一个核心),指令集是后面排队的人,窗口是数据吞吐量.当中午就餐人多的时候,一个窗口肯定忙不过来,这时候可以增加窗口,有两种方 ...
- python 装饰器 第十一步：多层装饰器的嵌套
#第十一步:多层装饰器的嵌套 #装饰器1 def kuozhan1(func): #定义装饰之后的函数 def neweat1(): # 扩展功能1 print('1-----饭前洗手') # 调用基 ...
- event代表事件的状态，专门负责对事件的处理，它的属性和方法能帮助我们完成很多和用户交互的操作;
IE的event和其他的标准DOM的Event是不一样的,不同的浏览器事件的冒泡机制也是有区别 IE:window.event.cancelBubble = true;//停止冒泡window.eve ...
- PHPStorm remoteHost链接FTP成功，但不显示文件目录
============================================== 勾上前两个选项就可以了
- putchar(".:-=+*#%@"[(int)(d * 5.0f)])
前两天在玩知乎时候见到有个用C语言画心的小代码感觉还是蛮好玩的,不过,里面有行代码看了好久才懂: putchar(".:-=+*#%@"[(int)(d * 5.0f)]); ,先 ...
- 【问题解决方案】本地仓库删除远程库后添加到已有github仓库时仓库地址找不到的问题(github仓库SSH地址)
参考: 我参考我自己.jpg 背景: 想添加一下远程库,github主页找了半天,Google搜索了半天,都没有找到,所以这里写一个,记录一下 1-格式分析:git@github.com:用户名/仓库 ...
- Linux安装篇超详细
在此篇文章中主要介绍Linux系统的安装,以及学习大数据过程中Linux中常用的命令有哪些. 一.Linux(CentOs6.8)的安装 1.安装VMware虚拟机 虚拟机下载地址:https://p ...
- 用私有构造器或者枚举类型强化SingleTon（单例）属性
单例(singleton)就是一个只实例化一次的类.使类成为单例可能会使它的测试变得困难,因为除非它实现了作为其类型的接口,否则不可能用模拟实现来代替这个单例.下面是几种实现单例的方法: 1.共有静态 ...
- #2560异或和问题 jdfz集训—秦岳
题目描述 N个数字,要求选择M次,每次从N个数中选出两个数(Ai,Aj)(但不能和之前某次选择相同),此次选择的得分为Ai xor Aj. 求最大得分. 输入格式 第一行包含两个整数N,M 接下来一行 ...