​

<!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实现简单的登陆框的更多相关文章

  1. 使用QT实现一个简单的登陆对话框（纯代码实现C++）

    使用QT实现一个简单的登陆对话框(纯代码实现C++) 效果展示 使用的QT控件 控件 描述 QLable 标签 QLineEdit 行文本框 QPushButton 按扭 QHBoxLayout 水平 ...

  2. AngularJs最简单解决跨域问题案例

    AngularJs最简单解决跨域问题案例 2016-05-20 09:18 82人阅读 评论(0) 收藏 举报  分类: javascript(1)  作者:白狼 出处:http://www.mank ...

  3. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

  4. [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架

    MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...

  5. 使用jQuery实现简单的tab框

    html代码 <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta ...

  6. bootstrap 一个简单的登陆页面

    效果如图:用bootstrap 写的一个简单的登陆 一.修改样式 样式可以自己调整,例如换个背景色之类的,修改 background-color属性就可以 #from { background-col ...

  7. tkinter做一个简单的登陆页面

    做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...

  8. 初学html，任务2：写一个简单的登陆/注册界面

    先在body中把最基础的标签写出来 现在页面运行出来是这样的 就是一个没有任何样式的基础界面: 接下来我们为这些标签加上样式 首先还是让页面所有元素的padding和margin都设置为0, 清除浏览 ...

  9. tkinter做一个简单的登陆页面（十六）

    做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...

随机推荐

  1. 用 Flask 来写个轻博客 (34) — 使用 Flask-RESTful 来构建 RESTful API 之三

    目录 目录 前文列表 应用请求中的参数实现 API 分页 测试 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 Flask 来写个轻博客 (2) - Hello World! 用 F ...

  2. python with as 以上这段代码执行完毕后，就算在处理过程中出问题了，文件 f 总是会关闭。

    with open("myfile.txt") as f: for line in f: print(line, end="") 以上这段代码执行完毕后,就算在 ...

  3. 简单DP入门（二） 最长上升子序列及其优化

    最长上升子序列解决问题: 有N个数,求出它最长的上升子序列并输出长度. 在题里不会讲的这么直白,这个算法往往会与其他的算法混在一起使用. 在这篇文章中不会出现其他的例题,为了让大家更好的理解,我只会对 ...

  4. HDU3449_Consumer

    这个是一个背包的变形题,很值得仔细体味 大致题意: 这个比普通背包多一个限制:再选每一类物品之前必须要先购买一个篮子来装,篮子有一定的价格,其他就和背包是一样的了 思路: 为了能够体现篮子的价值,我们 ...

  5. 从现在开始强迫自己使用 Reflect

    静态方法 Reflect.apply(target, thisArg, args) 等同于 Function.prototype.apply.call(func, thisArg, args) Ref ...

  6. js 动态绑定解绑事件

    function addEvent(obj, type, handle) { if (obj.addEventListener) { obj.addEventListener(type, handle ...

  7. for循环（foreach型）流程

  8. rabbitmq一个连接多个信道channel

    https://www.cnblogs.com/eleven24/p/10326718.html

  9. 解读dbcp自动重连那些事（转）

    转自:http://agapple.iteye.com/blog/791943 Hi all : 最近在做 offerdetail 优化时,替换了数据库驱动,从 c3p0 0.9.1 -> db ...

  10. webpack 学习4 使用loader 以及常用的一些loader

    webpack本身只支持处理JavaScript,其他的文件,如css img less是不识别的,所以才会有loader这个东西,它就是可以使webpack能够处理其他非js文件的拓展程序 首先我们 ...