angularJS中除了ng開頭的屬性指令，還有標籤指令、自定義指令等。
標籤指令 ：對原有的標籤進行了重新的構建，並有了新的功能
<a>：阻止默認行爲，阻止刷新頁面<select>
-ng-options（需要與ng-model結合使用）
代碼示例：
<script>
var m = angular.module('myApp',[]);//引入相應模塊
m.controller('Aaa',['$scope',function($scope){
$scope.colors=[
{name:"red"},
{name:"yellow"},
{name:"blue"}
];
}]);
</script>
<div ng-controller="Aaa" ng-app="myApp">
<a href="">{{myColor.name}}
<select ng-options="color.name for color in colors" ng-model="myColor"></select>
</div>頁面結果展示：
<textarea><input><form>
-novalidate：阻止表單默認行爲
代碼示例：
<form novalidate>
<input type="email">
</form>表單驗證
- $valid：表單驗證成功返回真，驗證失敗返回假（驗證格式不合格時不通過）
- $invalid：與valid相反，表單驗證失敗返回真，驗證成功返回假
- $pristine：原始值即進行驗證的值是初始值，未進行修改則返回true，修改後則返回false
- $dirty：與pristine相反
- $error：無論是驗證成功還是驗證失敗，驗證信息均會在此
- 注意點：
— name的方式進行查找
— 要寫ng-model
代碼示例：
<script>
var m = angular.module('myApp',[]);//引入相應模塊
m.controller('Aaa',['$scope',function($scope){
$scope.colors="hello";
}]);
</script>
<div ng-controller="Aaa" >
<form novalidate name="myForm">
<input type="text" name="myText" ng-model="colors">
<div>{{myForm.myText.$valid}}</div>
<div>{{myForm.myText.$invalid}}</div>
<div>{{myForm.myText.$pristine}}</div>
<div>{{myForm.myText.$dirty}}</div>
</form>
</div>頁面結果展示：
改變了原始值：
- type:類型驗證
-email
-number
-url required：判斷是否爲空，空爲true，非空爲false
ng-minlength：當字符串的長度大於該值時返回false，字符串長度小於該值時返回true。驗證成功false，失敗返回true。
ng-maxlength
ng-pattern：通過正則來限制內容，驗證成功返回false，失敗返回true
代碼示例：
<script>
var m = angular.module('myApp',[]);//引入相應模塊
m.controller('Aaa',['$scope',function($scope){
$scope.colors="hello";
}]);
</script>
<div ng-controller="Aaa" >
<form novalidate name="myForm">
<input type="text" name="myText" ng-model="colors" required ng-minlength="4" ng-pattern="/^[a-zA-Z]+$/">
<div>{{myForm.myText.$valid}}</div>
<div>{{myForm.myText.$invalid}}</div>
<div>{{myForm.myText.$pristine}}</div>
<div>{{myForm.myText.$dirty}}</div>
<div>{{myForm.myText.$error}}</div>
</form>
</div>頁面結果展示：
通過表單驗證設置CSS樣式：
.class
- .ng-valid{}：驗證成功顯示該樣式
- .ng-invalid{}：驗證失敗顯示該樣式
- .ng-pristine{}：保留原始值顯示該樣式
- .ng-dirty{}：修改元素值顯示該樣式
代碼示例：
<style type="text/css">
input.ng-valid {border:1px red solid;}
input.ng-invalid {border:1px green solid;}
</style>頁面結果展示：
表單驗證例子：
代碼示例：
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.regText = {
regVal : 'default',
regList : [
{ name : 'default' , tips : '請輸入用戶名'},
{ name : 'required' , tips : '用戶名不能爲空'},
{ name : 'pattern' , tips : '用戶名必須是字母'},
{ name : 'pass' , tips : '√'}
]
};
$scope.regPassword = {
regVal : 'default',
regList : [
{ name : 'default' , tips : '請輸入密碼'},
{ name : 'required' , tips : '密碼不能爲空'},
{ name : 'minlength' , tips : '密碼至少6位'},
{ name : 'pass' , tips : '√'}
]
};
$scope.change = function( reg , err ){
for(var attr in err){
if( err[attr] == true ){
$scope[reg].regVal = attr;
return;
}
}
$scope[reg].regVal = 'pass';
};
}]);
<div ng-controller="Aaa">
<form novalidate name="nForm">
<div>
<label>用戶名:</label>
<input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur="change('regText',nForm.nText.$error)">
<span ng-repeat=" re in regText.regList | filter : regText.regVal ">{{ re.tips }}</span>
</div>
<div>
<label>密碼:</label>
<input type="password" name="nPassword" ng-model="regPassword.name" required ng-minlength="6" ng-blur="change('regPassword',nForm.nPassword.$error)">
<span ng-repeat=" re in regPassword.regList | filter : regPassword.regVal ">{{ re.tips }}</span>
</div>
</form>
</div>頁面結果展示：
