效果截图：
示例代码：
<!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=" 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>