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 ...
随机推荐
- 发布delphi程序（build with runtime package）要带哪些文件？
Delphi提供两种方式来编译你的程序:使用包或者是单独的exe 使用包,你可以使用如下方法设置: 项目选项(菜单project->options->Packages页), 在Runtim ...
- Asp.Net Core 第02局：Program
总目录 前言 本文介绍Program,它包含程序的入口Main方法.从这里开始... 环境 1.Visual Studio 2017 2.Asp.Net Core 2.2 开局 第一手:Program ...
- 3.jmeter jsr232 脚本获取当前测试的正在活动的线程数
jsr232 groovy 脚本获取当前测试的正在活动的线程数 (需要选择 groovy类型, 如果使用beanshell或者javascript,请根据其语法稍作修改即可) import org.a ...
- ctDNA的分析理论上也可以为多样性的肿瘤
导语 肺腺癌(LUAD)和肺鳞癌(LUSC)是最常见的非小细胞肺癌类型.循环肿瘤DNA(ctDNA)是由凋亡或坏死的肿瘤细胞释放并在血液中循环的小片段DNA.与常规肿瘤活检相比,ctDNA检测具有一定 ...
- SpringMVC学习（10）：异常处理
在项目中如何处理出现的异常,在每个可能出现异常的地方都写代码捕捉异常?这显然是不合理的,当项目越来越大是也是不可维护的.那么如何保证我们处理异常的代码精简且便于维护呢?这就是本篇要讲的内容->异 ...
- kubernetes容器集群自签TLS证书
集群部署 1.环境规划 2.安装docker 3.自签TLS证书 4.部署Flannel网络 5.部署Etcd集群 6.创建Node节点kubeconfig文件 7.获取K8S二进制包 8.运行Mas ...
- js常用算术运算符与一元运算符在做运算时不同类型的转换规则
/** * 算术运算符:+, -, *, /, % * 当对非number类型的值进行运算(-, *, /, %)时,会将这些值先转换成number再运算,加法'+'运算除外, * 当对非number ...
- Python 第三天学习整理2
一.常用的字符串方法 capitalize() #将字符串首字母大写 center(100,'*') #把字符串居中的 count(‘zhou’)#查询次数 endswith('.jpg ')#判断字 ...
- [Js代码风格]浅析模块模式
1.实例解释模块模式 简明扼要的说,经典的模块模式指的定义一个立即执行的匿名函数.在函数中定义私有函数和私有变量并且返回一个包含公共变量和公共函数作为属性和方法的匿名对象. var classicMo ...
- html使用字符串拼接js函数时传字符串参数
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...