这里我们就来借助妹子ui来搭建下模版，废话不多说，代码如下图所示：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/amazeui.min.css"> <script src="js/jq2.js"></script> <script src="js/amazeui.min.js"></script> </head> <body ng-app="myapp"> <div style=" 250px; margin: 0 auto" ng-controller="forms"> <div class="am-alert {{color}} " data-am-alert ng-show="errorMsg.length > 0"> <button type="button" class="am-close">×</button> <p>{{errorMsg}}</p> </div> <h1>登录表单</h1> <div class="am-input-group"> <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span> <input type="text" class="am-form-field" placeholder="Username" ng-model="user.name" > </div> <div class="am-input-group"> <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span> <input type="password" class="am-form-field" placeholder="Password" ng-model="user.pass" > </div> <div class="am-g" style="margin-top: 15px"> <div class="am-u-sm-6 am-text-center"> <button type="button" class="am-btn am-btn-success" ng-click="login()" >登录</button> </div> <div class="am-u-sm-6 am-text-center"> <button type="button" class="am-btn am-btn-default">取消</button> </div> </div> </div> </body> <script src="js/angular.min.js"></script> <script> var module = angular.module("myapp",[]); module.controller('forms',function($scope){ $scope.user = {name:'',pass:''}; $scope.errorMsg = ''; $scope.login = function(){ console.log($scope.user.name); console.log($scope.user.pass); if($scope.user.name == 'admin' && $scope.user.pass == 'admin888'){ $scope.errorMsg = 'YES~~~~'; $scope.color = "am-alert-success"; }else{ $scope.errorMsg = 'NO~~~~~'; $scope.color = "am-alert-danger"; } } }) </script> </html>
效果如下图所示：
