这里我们就来借助妹子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="width: 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>
效果如下图所示：
