上篇看完angular的指令現在看一下他的指令和驗證。這裡的驗證的物件是input。

事件

ng-click

表示點選事件
繫結點選事件

<button id="butLogin" ng-click="login()">登入</button>

  $scope.login =function(){
     alert("哈哈哈");
    }

ng-dblclick

表示雙擊事件

ng-submit

form表單提交

ng-hide ng-show ng-if

控制控制元件的顯示和隱藏

    <button id="butLogin" ng-click="login()">登入</button>
    <button id="butRegister" ng-hide="hide">註冊</button>
    <button id="butForget" ng-show="show">忘記密碼</button>

    <button  ng-if="show">ng-if="show"</button>


    <button  ng-if="ifTag">
 
ng-if="ifTag"</button>

 var ifTag = true;
 var app = angular.module("myApp", []);
 app.controller("MyController", function ($scope) {
    $scope.ifTag= ifTag;
    $scope.login =function(){
      $scope.hide=!$scope.hide;
      $scope.show=$scope.hide;
      $scope.ifTag=!$scope.ifTag;
    }
  });
 

ng-hide和ng-if都可以讓控制元件進行隱藏和顯示，那他們的區別是什麼呢。可以先看下面這2個圖：

可以發現，當ng-hide=”true”和ng-show=”false”的時候，在這裡控制元件還是可以看見的存在的，但是當ng-if=“false”的時候，從截圖中可以看到程式碼已經被註釋了，那麼到時候bom解析的時候就會忽略這個。

表單驗證

一般當我們使用表單輸入的內容的時候，都要進行驗證，比如是否為空，是否是合格的手機號，身份證號或者長度是否是多少位，也有是否滿足什麼6-16位字串等。java中我一般就是獲取輸入的內容然後正則表示式判斷。在angularjs中驗證內容是否存在或者內容是否滿足某些條件又是怎麼實現的呢？

required

表示為必填項

<form class="formLogin"  name="myForm">
<p>username：<input type="text" name="user" ng-model="username" required/></p>
<p>password：<input type="password" name="pass" ng-model="password" required/></p>


<span ng-show="myForm.user.$error.required">使用者名稱是必須的。</span>   <span ng-show="myForm.pass.$error.required">密碼是必須的。</span>
</form>

invalid& valid&pristine&dirty

    <p>eamiladdress：<input type="email" name="email" ng-model="email" required/></p>
    <span ng-show="myForm.email.$pristine">$pristine</span>
    <span ng-show="myForm.email.$dirty">$dirty</span>
    <span ng-show="myForm.email.$invalid">$invalid</span>
    <span ng-show="myForm.email.$valid">$valid</span>

總結:
invalid和valid分別表示內容是否非法，內容是否合法。，非法的時候input不會顯示內容。

dirty和pristine分別表示表單改動和表單內容未改動。這2個只會輸出一遍。
比如我們要在表單內容改變並且輸入內容不合法的狀態下進行提示，可以這樣寫

<span style="background-color: #009999" ng-show="myForm.email.$dirty&&myForm.email.$invalid">
     表單內容改動並且輸入不合法
</span>

novalidate

不引用瀏覽器本身的檢測，如下圖我們講內容清空進行提交的時候，會彈出一個瀏覽器自帶的提示，你要是不想要，就可以在form上加上這個屬性

  <form class="formLogin"  name="myForm" novalidate >

以上，不對的地方請指出非常感謝。