AngularJs学习——模拟用户登录的简单操作

效果截图：

示例代码：

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

 

posted @ 2016-04-14 23:02  奔跑的蜗牛~  阅读(1395)  评论(0)  编辑  收藏  举报