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 ...
随机推荐
- 杂项-Tmod：常见错误提示
ylbtech-杂项-Tmod:常见错误提示 1.返回顶部 1. The column 'Content' was specified multiple times for 'T'.select a. ...
- taintCheck的实现
参考:http://bitblaze.cs.berkeley.edu/papers/taintcheck-full.pdf 1. 应用taint analysis需要解决三个问题 a. 哪些input ...
- ubuntu snap 包管理器
基本使用 snap find $package snap install $package [--channel=beta] snap list snap refresh $package [--ch ...
- Scrapy框架: Request回调函数
Request回调函数 def parse_page1(self, response): return scrapy.Request("http://www.example.com/some ...
- C++中的赋值兼容性和重写
1,父子间的赋值兼容: 1,子类对象可以当做父类对象使用(赋值兼容性): 1,子类对象可以直接赋值给父类对象: 2,子类对象可以直接初始化父类对象: 3,父类指针可以直接指向子类对象(得到的是子类对象 ...
- C++中的转换构造函数
1,类型转换函数主要功能就是做类型转换,类型转换是将一个数据从 A 类型转换 到 B 类型,有隐式类型转换和强制类型转换两种: 2,再论类型转换: 1,标准数据类型之间会进行隐式的类型安全转换: 1 ...
- 【题解】Antisymmetry
题目大意 对于一个01字符串,如果将这个字符串0和1取反后,再将整个串反过来和原串一样,就称作“反对称”字符串.比如00001111和010101就是反对称的,1001就不是. 现在给出一个长度为N的 ...
- 47-python基础-python3-字符串-常用字符串方法(五)-rjust()-ljust()-center()
6-rjust().ljust()和 center()方法对齐文本 rjust()和 ljust()字符串方法返回调用它们的字符串的填充版本,默认通过插入空格来对齐文本. rjust()和 ljust ...
- 【虚拟机】:"该虚拟机似乎正在使用中。 如果该虚拟机未在使用，请按“获取所有权(T)”按钮获取它的所有权。否则，请按“取消(C)”按钮以防损坏。"
1.可能是由于上次使用虚拟机,没有正常关闭出现了这种情况,于是把问题复制粘贴搜了一下. 2.出现了如下可行的解决方法:把后缀名为.vmdk.lck的都删除掉. 3.然后再打开虚拟机就可以了.
- 转载 Struts2的配置 struts.xml Action详解
在学习struts的时候,我们一定要掌握struts2的工作原理.只有当我们明确了在struts2框架的内部架构的实现过程,在配置整个struts 的框架时,可以很好的进行逻辑上的配置.接下来我就先简 ...