AngularJS 的 input

直接用官網的範例，覺得很酷。

view plaincopy to clipboardprint

1. <div ng-app>  
2.      <div ng-controller="Ctrl">  
3.         <form name="myForm">  
4.         User name: <input type="text" name="userName" ng-model="user.name" required>  
5.         <span class="error" ng-show="myForm.userName.$error.required">  
6.         Required!</span><br>  
7.         Last name: <input type="text" name="lastName" ng-model="user.last"  
8.         ng-minlength="3" ng-maxlength="10">  
9.         <span class="error" ng-show="myForm.lastName.$error.minlength">  
10.         Too short!</span>  
11.         <span class="error" ng-show="myForm.lastName.$error.maxlength">  
12.         Too long!</span><br>  
13.         </form>  
14.         <hr>  
15.         <tt>user = {{user}}</tt><br/>  
16.         <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>  
17.         <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>  
18.         <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>  
19.         <tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>  
20.         <tt>myForm.$valid = {{myForm.$valid}}</tt><br>  
21.         <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>  
22.         <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>  
23.         <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>  
24. </div>  
25.        
26. </div>  

幾個地方說明，用 ng-model="user.name" 後，在 {{user}} 可以直接秀出 json 格式。

input 的欄位可以用 require，再用 ng-show="myForm.userName.$error.required" 可以讓不符合輸入條件的訊息出現。

error 的訊息可以用 {{myForm.userName.$error}} 印出來，也是 json 格式。

input 可以用的 attr 有這些

view plaincopy to clipboardprint

1. <input  
2.     ng-model="{string}"  
3.     [name="{string}"]   
4.     [required]   
5.     [ng-required="{boolean}"]   
6.     [ng-minlength="{number}"]   
7.     [ng-maxlength="{number}"]   
8.     [ng-pattern="{string}"]   
9.     [ng-change="{string}"]>  
10. </input>  

Demo