angular支持IE8+浏览器，虽然性能很好，但是目前只适用于手机端项目
知识点：
域$scope
AngularJS基础指令
指令实现不同的功能
学习思路和方法
<link rel="stylesheet" href="lib/css/bootstrap.min.css"/> <body ng-app="myApp" ng-controller="MainController">
angular.module('myApp', [])
.controller('MainController', function ($scope) {
$scope.submitForm = function () {
console.log('表单提交了');
};
});
/***********************************/ <input class="form-control" type="text" ng-model="name" ng-minlength="4" ng-maxlength="10"/> <div class="red">{{name}}</div> <div>{{name}}</div> <div>{{name}}</div> <div>{{name}}</div> <div>{{name}}</div> <div>{{name}}</div> <div>{{name}}</div> /*******************************/ <form name="signUpForm" ng-submit="submitForm()"> <div class="form-group"> <label>用户名：</label> <input type="text" name="username" ng-model="username" ng-class="{'error': signUpForm.username.$invalid}" required ng-minlength="4" class="form-control" /> <div>{{username}}</div> <div ng-if="signUpForm.username.$invalid && signUpForm.username.$touched">您输入的有误差</div> <div ng-if="signUpForm.username.$valid" class="correct"> 恭喜输入正确 </div> </div> </form> /******************************/ <form name="signUpForm" ng-submit="submitForm()"> <div class="form-group"> <label>用户名：</label> <input type="text" name="username" ng-model="username" ng-class="{'error': signUpForm.username.$invalid}" required ng-minlength="4" class="form-control" /> <input type="text" name="username2" ng-model="username2" class="form-control" ng-disabled="signUpForm.username.$valid" /> <button class="btn btn-primary" ng-disabled="signUpForm.$invalid">提交</button> </div> </form> /**********************************/ <style> .wrapper { width: 200px; margin: 30px auto; } </style> </head> <body ng-app="myApp" ng-controller="MainController"> <div class="wrapper"> <h2>注册</h2> <form> <div class="form-group"> <label>用户名：</label> <input type="text" name="username" class="form-control"/> </div> <div class="form-group"> <label>密码：</label> <input type="password" name="password" class="form-control"/> </div> <div class="form-group"> <label>确认密码：</label> <input type="password" name="password2" class="form-control"/> </div> </form> </div> /****************************/ <link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css"/> <link rel="stylesheet" href="lib/css/bootstrap.min.css"/> <style> .wrapper { width: 200px; margin: 30px auto; } p.error { color: red; /* display: none;*/ } pre { white-space: normal; } p.input-result { position: relative; top: -26px; left: 179px; } p.success { color: #3C763D; } </style> </head> <body ng-app="myApp" ng-controller="MainController"> <!-- name="signUpForm" 注册表单 --> <div class="wrapper"> <h2>注册</h2> <form name="signUpForm" ng-submit="submitForm()"> <div class="form-group" ng-class="{'has-success': signUpForm.username.$valid}"> <label>用户名：</label> <pre>合法：{{signUpForm.username.$valid}}</pre> <pre>{{signUpForm.username}}</pre> <input type="text" name="username" class="form-control" ng-model="userdata.username" required ng-minlength="4" ng-maxlength="32" /> <p class="error" ng-if="signUpForm.username.$error.required && signUpForm.username.$touched"> 用户名不可为空 </p> <p class="error" ng-if="(signUpForm.username.$error.minlength || signUpForm.username.$error.maxlength) && signUpForm.username.$touched"> 用户名长度应在4~32位之间 </p> <p class="fa fa-check input-result success" ng-if="signUpForm.username.$valid"></p> </div> <div class="form-group" ng-class="{'has-success': signUpForm.password.$valid}"> <label>密码：</label> <input type="password" name="password" class="form-control" ng-model="userdata.password" required ng-minlength="6" ng-maxlength="18" /> <p class="error" ng-if="signUpForm.password.$error.required && signUpForm.password.$touched"> 密码不得为空 </p> <p class="error" ng-if="(signUpForm.password.$error.minlength || signUpForm.password.$error.maxlength) && signUpForm.password.$touched"> 密码应该在6~18位之间 </p> <p class="fa fa-check input-result success" ng-if="signUpForm.password.$valid"></p> </div> <div class="form-group" ng-class="{'has-success': signUpForm.password2.$valid}"> <label>确认密码：</label> <input type="password" name="password2" class="form-control" ng-model="userdata.password2" required compare="signUpForm.password" /> <p class="error"></p> </div> <div class="form-group"> <button class="btn btn-primary">注册</button> </div> </form> </div> <script src="lib/js/angular.min.js"></script> <script src="js/main.js"></script>
angular.module('myApp', [])
.controller('MainController', function ($scope) {
$scope.userdata = {};
$scope.submitForm = function () {
console.log('表单提交了');
// $scope.userdata是表单提交的内容
console.log($scope.userdata);
// Object {username: "aaa", password: "123456", password2: "456789"}
if($scope.signUpForm.$invalid) {
alert('请检查你输入的内容');
} else {
alert('提交成功！');
}
};
})
// 创建指令
.directive('compare', function () {
var o = {};
return o;
});