AngularJs學習——模擬用戶登陸的簡單操做

時間  2019-11-22
標籤 angularjs 學習 模擬 用戶 登陸 簡單 欄目 AngularJS 简体版
原文   原文鏈接

效果截圖：css

示例代碼：html

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>AngularJs-模擬用戶登陸</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"/>
</head>
<body>
    <div style="width: 600px; margin:0 auto; padding: 60px;" ng-controller="MyCtrl">
        <h4>用戶登陸</h4>
        <div class="form-group">
            <label>用戶名</label>
            <input type="text" class="form-control" ng-model="username">            
        </div>
        <div class="form-group">
            <label>密碼</label>
            <input type="text" class="form-control" ng-model="password">            
        </div>
        <div class="form-group">
            <button class="btn btn-primary" ng-click="login()">登陸</button>
            <p class="text-danger" ng-if="msg.length>0">提示信息：{{msg}}</p>
        </div>
    </div>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        angular.module('myapp',[])
        .controller('MyCtrl',function($scope){
            $scope.username = '';
            $scope.password = '';
            $scope.msg = '';
            $scope.login = function(){
                if($scope.username == 'admin' && $scope.password == '123456'){
                    $scope.msg = '登陸成功！';
                }else if($scope.username == '' || $scope.password == ''){
                    $scope.msg = '用戶名或密碼不能爲空！';
                }else{
                    $scope.msg = '用戶名或密碼錯誤！';
                }
            }
        })
    </script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程