Angular的事件和表單詳解
前面的文章說道了click事件,與其類似的mouseover以及mousemove等等。下面看看selected、change、copy等運用在表單的事件吧。
selected
<div ng-controller="Aaa"> <input type="checkbox" ng-model="aaa" value="{{aaa}}"> <select> <option>11111</option> <option ng-selected="aaa">22222</option> <option>33333</option> </select> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){}]); </script>
如果我們希望一個select選中指定的option,只需要設置該option為selected="selected",現(xiàn)在為第二個綁定一個變量aaa,對應了一個單選框的ng-model,但單選框選中時aaa為true,取消選中時為false,這樣就能設置option的selected了。
change
<div ng-controller="Aaa"> <input type="text" ng-change="bbb='hello'" ng-model="bbb"> <p>{{bbb}}</p> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){}]); </script>
當輸入框的內(nèi)容發(fā)現(xiàn)改變的時候,讓bbb變量設為'hello'。
copy
<div ng-controller="Aaa"> <input type="text" value="xiecg" ng-copy="ccc='hello'"> <p>{{ccc}}</p> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){}]); </script>
當我們粘貼內(nèi)容到輸入框的時候,ccc的值變成'hello'。
除此之外,還有cut(剪切)、paste(粘貼事件)。
下面看個具體的表單驗證的例子:
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input相關指令詳解</title> <link rel="stylesheet" > <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script> <style type="text/css"> .username .ng-valid{background-color:lightgreen;} .username .ng-invalid{background-color:lightcoral;} .username .ng-pristine{background-color:#fafafa;} /* .username .ng-dirty{} .username .ng-invalid-required{} .username .ng-invalid-minlength{} .username .ng-valid-max-length{} */ </style> </head> <body> <div ng-controller="Aaa"> <div class="col-md-6"> <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid,user)" class="form-horizontal" novalidate> <div class="form-group has-feedback"> <div class="col-md-4"> <label for="name">用戶名</label> </div> <div class="col-md-8 username"> <input class="form-control" id="name" name="name" type="text" required ng-pattern="/^[a-zA-Z]{0,6}$/" ng-model='user.name' /> <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.name.$dirty && myForm.name.$valid"></span> <span class="glyphicon glyphicon-remove form-control-feedback" ng-show="myForm.name.$dirty && myForm.name.$invalid"></span> </div> </div> <div class="form-group has-feedback"> <div class="col-md-4"> <label for="url">URL</label> </div> <div class="col-md-8"> <input type="url" id="url" name="url" ng-model="user.url" class="form-control" /> <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.url.$dirty && myForm.url.$valid"></span> </div> </div> <div class="form-group text-center"> <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" /> </div> </form> </div> <div class="col-md-12"> <p> 用戶名:{{user.name}} 沒修改:{{myForm.name.$pristine }} 修改過:{{myForm.name.$dirty}} 驗證失?。簕{myForm.name.$invalid}} 驗證成功:{{myForm.name.$valid}} required:{{myForm.name.$error.required}} </p> <p> URL:{{user.url}} 沒修改:{{myForm.url.$pristine }} 修改過:{{myForm.url.$dirty}} 驗證失敗:{{myForm.url.$invalid}} 驗證成功:{{myForm.url.$valid}} 錯誤詳情:{{myForm.url.$error}} </p> </div> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope','$interval',function($scope,$interval){ $scope.submitForm = function(isValid,data) { //驗證表單是否可是提交 if (isValid) { console.log(data); }else{ console.log('驗證失敗'); } }; }]); </script> </body> </html>
首先看看表單部分,使用了novalidate屬性禁用了表單默認驗證行為,并綁定了ng-submit綁定了submitForm方法。
在用戶名的input上設置了required,表示不能為空。ng-pattern是自定義的正則表達式。ng-model是數(shù)據(jù)(用戶填寫的數(shù)據(jù))。
URL的input也是類似的設置。
看一下在form綁定的submitForm函數(shù),傳遞了兩個參數(shù),myForm.$valid以及user。
myForm是form的name,代表整個表單,myForm.$valid是個布爾值,表示整個表單的元素是否通過驗證,user是用戶填寫的數(shù)據(jù),用于提交數(shù)據(jù)。我們都可以通過controller得到這些信息,然後提交給後端。
myForm代表整個表單,給input附上name值,就可以得到input的驗證信息,我們以用戶名的input為例。
用戶名:{{user.name}}
沒修改:{{myForm.name.$pristine }}
修改過:{{myForm.name.$dirty}}
驗證失?。簕{myForm.name.$invalid}}
驗證成功:{{myForm.name.$valid}}
required:{{myForm.name.$error.required}}
這里除了第一個之外,其他都是布爾值。
在用戶名的input的同級上有兩個span元素,分別是正確和錯誤的圖標。(ng-show用于控制元素的顯示和隱藏,後面會詳細介紹)
myForm.name.$dirty && myForm.name.$valid 當用戶修改input的值了,并且驗證成功了,我們給予正確的提示。
myForm.name.$dirty && myForm.name.$invalid 當用戶修改input的值了,但是遺憾驗證失敗了,我們給予失敗的提示。
除此之外,angular提供了class為我們做更多樣式上的提示。
angular在做驗證時,這些屬性會及時的添加到元素上,方便定制這些類來實現(xiàn)特定的場景應用。
當我們?nèi)枯斎胝_就可以做ajax提交了。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
AngularJS實現(xiàn)select的ng-options功能示例
這篇文章主要介紹了AngularJS實現(xiàn)select的ng-options功能,結合實例形式分析了AngularJS使用ng-options操作select列表的相關實現(xiàn)技巧,需要的朋友可以參考下2017-07-07Angular+ionic實現(xiàn)折疊展開效果的示例代碼
這篇文章主要介紹了Angular+ionic實現(xiàn)折疊展開效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07AngularJS入門教程之數(shù)據(jù)綁定用法示例
這篇文章主要介紹了AngularJS之數(shù)據(jù)綁定用法,結合實例形式分析了AngularJS基于內(nèi)置指令ng-model實現(xiàn)數(shù)據(jù)綁定的操作技巧,需要的朋友可以參考下2016-11-11