2013年12月20日 星期五

AngularJS 的 input

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

  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 有這些
  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
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...