AngularJs-04-模拟登陆-优快云博客

本文介绍了一个使用AngularJS实现的简单模拟登录系统。该系统通过HTML和AngularJS搭建了一个登录页面，并实现了基本的登录验证功能。当输入正确的用户名'bilaisheng'和密码'123456'时，会弹窗提示'登陆成功'；否则，提示'登陆失败'。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>