AngularJS----基本操做

以前的學習基本瞭解了AngularJS的經常使用方法，下來就繼續學習吧。

建立自定義的指令

除了內置指令，咱們能夠建立自定義指令。經過.directive函數來添加。

1 2 3

<div change-data>      11 </div>

---

1 2 3 4 5 6

//自定義指令   app.directive( "changeData" , function (){   return  {         template: "<h1>這個我自定義的！</h1>"         };   });

須要注意：要是使用駝峯法命名指令，例changeData,在使用的時候必須以-分割。change-data就像上面的那個同樣;這裏面return { }中不僅一個返回值，按照教程上面還有不少。

驗證輸入

郵箱驗證：這裏的驗證很簡單，就是把類型定義爲email就行。驗證出錯顯示是在後面，先是隱藏起來，等到出錯在顯示出來。

---

1 2 3 4 5

<form name = "myForm" >      Email:      <input type= "email"  name = "myAddress"  ng-model= "text" />      <span ng-show= "myForm.myAddress.$error.email" >這是一個很神奇的報錯</span> </form>

---

咱們看代碼的截圖就能夠發現。

---

這裏ng-show裏面是指定驗證錯誤的地方。且提示信息會在ng-show屬性返回true時顯示。

應用狀態

能夠查看值是否被修改。具體的狀態值有invalid(看值是否合法)，dirty(看值是否修改過),touched(看值是否經過觸屏點擊),error(看是否有誤)

1 2 3 4 5 6 7 8 9

<form name = "myForm"  ng-init= "text='mr-zhanghui@qq.com'" >      Email:      <input type= "email"  name = "myAddress"  ng-model= "text"  required/>      <span ng-show= "myForm.myAddress.$error.email" >這是一個很神奇的報錯</span>      <h1>狀態值</h1>      valid: -----{{myForm.myAddress.$valid}} ---  //值合法爲true<br/>      dirty: -----{{myForm.myAddress.$dirty}}   ---//值是否改變爲true<br/>      touched: ---{{myForm.myAddress.$touched}}  ---//是否經過觸屏爲true<br/> </form>

---

修改css類

ng-model指令基於它們的狀態爲HTML元素提供CSS類經過在style類中的調用.ng-invalid就能夠修改其CSS屬性

1 2 3 4 5

<style>      input.ng-invalid{               } </style>

---

AngularJS Scope(做用域)

Scope在視圖和控制器之間起做用，它是一個對象，有可用的方法和屬性。通常應用在視圖和控制器上。全部的應用都有一個$rootScope,它能夠做用於整個應用中，是各個controller中scope的橋樑。使用rootScope定義的值能夠在各個controller中取得。

1 2 3 4

app.controller( "myCtrl" , function ($scope,$rootScope){      $scope.namess=[ '11' , '22' , '33' ];      $rootScope.rootPerson= "我叫阿輝" ;    });

---

1 2 3 4 5 6 7 8 9 10 11

<div ng-init= "names=['1','2','3']"  ng-controller= "myCtrl" >      <li>{{rootPerson}}</li>      <ul>          <li ng-repeat= "item in names" >              {{item}}          </li>          <li ng-repeat= "x in namess" >              {{x}}          </li>      </ul>        </div>

---

Angular.JS控制器

ng-controller指令定義了應用程序控制器，控制器是JavaScript對象，由標準的JavaScript對象的構造函數建立。

控制器方法：是在控制器裏面建立方法，以後在VIEW中調用。感受前端的語言很屌，感受要顛覆後端語言的節奏。

1 2 3 4 5

<div ng-controller= "method" >      <input type= "text"  ng-model= "firstName" /><br/>      <input type= "text"  ng-model= "lastName" /><br/>      {{fullName()}} </div>

---

1 2 3 4 5 6 7 8

app.controller( "method" , function ($scope){      $scope.firstName= "張" ;      $scope.lastName= "輝" ;      //定義的方法fullName();      $scope.fullName= function (){          return  $scope.firstName+ "" +$scope.lastName;      } });

---

---

1 2 3 4 5 6 7 8 9 10 11

$scope.persons=[      { name : 'ahui' ,country: 'jiaxin' },      { name : 'ahui' ,country: 'jiaxin' },      { name : 'ahui' ,country: 'jiaxin' }      ];   <ul>        <li ng-repeat= "x in persons" >           {{x. name + ',' +x.country}}        </li> </ul>

---

AngularJS過濾器

AngularJS經過使用管道字符(|)添加到表達式和指令中。

• 向表達式添加過濾器

過濾器能夠經過一個管道字符(|)和一個過濾器添加到表達式中。

---

1 2 3 4 5 6 7 8

<div>      <input name = "text"  ng-model= "name" /><br/>      <input name = "text"  ng-model= "pwd" /><br/>      <h4>          {{ name |uppercase}}<br/>   //大寫          {{pwd|lowercase}}          //小寫      </h4> </div>

---

• 向指令添加過濾器

添加方法是同樣的；

1 2 3 4 5

<ul>      <li ng-repeat= "x in persons|orderBy:'country'" >          {{x. name + ',' +x.country}}      </li> </ul>

---

• 過濾輸入

輸入過濾器能夠經過一個管道字符(|)和過濾器添加到指令中，該過濾器後跟一個冒號和一個模型名稱。利用filter從數組中選擇一個子集。

1 2 3 4 5 6 7 8 9

<p>輸入過濾:</p>   <p><input type= "text"  ng-model= "test" ></p>   <ul>    <li ng-repeat= "x in names | filter:test | orderBy:'country'" >      {{ (x. name  | uppercase) + ', '  + x.country }}    </li> </ul>

---