欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular的事件和表單詳解

 更新時(shí)間:2016年12月26日 15:53:58   作者:小謝53  
這篇文章主要為大家詳細(xì)介紹了Angular的事件和表單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

前面的文章說(shuō)道了click事件,與其類(lèi)似的mouseover以及mousemove等等。下面看看selected、change、copy等運(yùn)用在表單的事件吧。 

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>

如果我們希望一個(gè)select選中指定的option,只需要設(shè)置該option為selected="selected",現(xiàn)在為第二個(gè)綁定一個(gè)變量aaa,對(duì)應(yīng)了一個(gè)單選框的ng-model,但單選框選中時(shí)aaa為true,取消選中時(shí)為false,這樣就能設(shè)置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>

當(dāng)輸入框的內(nèi)容發(fā)現(xiàn)改變的時(shí)候,讓bbb變量設(shè)為'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>

當(dāng)我們粘貼內(nèi)容到輸入框的時(shí)候,ccc的值變成'hello'。

除此之外,還有cut(剪切)、paste(粘貼事件)。 

下面看個(gè)具體的表單驗(yàn)證的例子: 

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>input相關(guān)指令詳解</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}}
   沒(méi)修改:{{myForm.name.$pristine }}
   修改過(guò):{{myForm.name.$dirty}}
   驗(yàn)證失?。簕{myForm.name.$invalid}}
   驗(yàn)證成功:{{myForm.name.$valid}}
   required:{{myForm.name.$error.required}}
  </p>
  <p>
   URL:{{user.url}}
   沒(méi)修改:{{myForm.url.$pristine }}
   修改過(guò):{{myForm.url.$dirty}}
   驗(yàn)證失?。簕{myForm.url.$invalid}}
   驗(yàn)證成功:{{myForm.url.$valid}}
   錯(cuò)誤詳情:{{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) {
   //驗(yàn)證表單是否可是提交
   if (isValid) {
    console.log(data);
   }else{
    console.log('驗(yàn)證失敗');
   }
  };
 }]);
</script>
</body>
</html>
 

首先看看表單部分,使用了novalidate屬性禁用了表單默認(rèn)驗(yàn)證行為,并綁定了ng-submit綁定了submitForm方法。

在用戶名的input上設(shè)置了required,表示不能為空。ng-pattern是自定義的正則表達(dá)式。ng-model是數(shù)據(jù)(用戶填寫(xiě)的數(shù)據(jù))。

URL的input也是類(lèi)似的設(shè)置。 

看一下在form綁定的submitForm函數(shù),傳遞了兩個(gè)參數(shù),myForm.$valid以及user。

myForm是form的name,代表整個(gè)表單,myForm.$valid是個(gè)布爾值,表示整個(gè)表單的元素是否通過(guò)驗(yàn)證,user是用戶填寫(xiě)的數(shù)據(jù),用于提交數(shù)據(jù)。我們都可以通過(guò)controller得到這些信息,然後提交給後端。

myForm代表整個(gè)表單,給input附上name值,就可以得到input的驗(yàn)證信息,我們以用戶名的input為例。

用戶名:{{user.name}}
沒(méi)修改:{{myForm.name.$pristine }}
修改過(guò):{{myForm.name.$dirty}}
驗(yàn)證失?。簕{myForm.name.$invalid}}
驗(yàn)證成功:{{myForm.name.$valid}}
required:{{myForm.name.$error.required}}

這里除了第一個(gè)之外,其他都是布爾值。

在用戶名的input的同級(jí)上有兩個(gè)span元素,分別是正確和錯(cuò)誤的圖標(biāo)。(ng-show用于控制元素的顯示和隱藏,後面會(huì)詳細(xì)介紹)

myForm.name.$dirty && myForm.name.$valid 當(dāng)用戶修改input的值了,并且驗(yàn)證成功了,我們給予正確的提示。

myForm.name.$dirty && myForm.name.$invalid 當(dāng)用戶修改input的值了,但是遺憾驗(yàn)證失敗了,我們給予失敗的提示。

除此之外,angular提供了class為我們做更多樣式上的提示。

angular在做驗(yàn)證時(shí),這些屬性會(huì)及時(shí)的添加到元素上,方便定制這些類(lèi)來(lái)實(shí)現(xiàn)特定的場(chǎng)景應(yīng)用。

當(dāng)我們?nèi)枯斎胝_就可以做ajax提交了。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論