AngularJs-04-模拟登陆

简介:
<!DOCTYPE html>
<html lang="zh" ng-app="myapp">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="../bower_components/angular/angular.js" type="text/javascript" charset="utf-8"></script>
    <title>AngularJs-模拟登陆</title>
</head>
<body>
    <form action="" id="loginForm" ng-controller="loginController">
        <p>用户名:<input type="text" ng-model="username" /></p>
        <p>密码:<input type="text" ng-model="password" /></p>
        <p><input type="button" ng-click="login($event)" value="登陆" /></p>
    </form>
    
    <script type="text/javascript">
        var app = angular.module("myapp",[]);
        
        app.controller("loginController",function($scope){
            $scope.username = "bilaisheng";
            $scope.password = "123456";
            $scope.login = function(e){
                var btndom = e.target;
                
                btndom.value = "登陆用户";
                
                var username = $scope.username;
                var password = $scope.password;
                
                if (username == "bilaisheng" && password == "123456") {
                     alert("登陆成功");
                } else{
                    alert("登陆失败");
                }
            };
        });
    </script>
</body>
</html>
AI 代码解读
目录
打赏
0
0
0
0
934
分享
相关文章
《AngularJS高级程序设计》——2.2 使用AngularJS
对于要创建的基本功能来说,todo.html文件中的静态HTML目前仅作为占位符使用。用户应该能看到待办事项的列表,勾选掉已完成的事项,并创建新事项。在下面各节中,我打算将AngularJS加进来,并应用一些基本特性来为我的待办事项应用赋予生命。
1598 0
《AngularJS高级程序设计》——第1章 准备 1.1你需要知道哪些知识
AngularJS吸收了服务器端开发技术的一些最好的方面,并使用它们来对浏览器中的HTML进行增强,为更简单而容易地构建富应用程序奠定了基础。AngularJS应用程序是围绕着被称为模型-视图-控制器(MVC)的模式而构建的,该模式的重点在于创建这样的应用程序
1346 0
《AngularJS高级程序设计》——导读
本书是AngularJS程序设计的高级指南。全书共25章,分为3个部分,每部分覆盖一组相关话题。第1部分为第1章到第8章,包括AngularJS简介,以及HTML、CSS和JavaScript的基础知识。
1623 0
《AngularJS高级程序设计》——2.4 小结
在本章中,演示了如何创建第一个简单的AngularJS应用,将一个HTML模拟页面改造成一个实现了MVC模式并从Web服务器上以JSON形式获得数据的动态应用。一路下来,我们接触了AngularJS提供给开发者的各个主要组件和特性,并指出了你在本书中哪些部分可以找到更多信息。
1526 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等