AngularJS----基本操做

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

建立自定義的指令

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

    <div change-data>
        11
    </div>

---

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

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

驗證輸入

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

---

    <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(看是否有誤)

    <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屬性

    <style>
        input.ng-invalid{
            background-color:lightblue;
        }
    </style>

---

AngularJS Scope(做用域)

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

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

---

    <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中調用。感受前端的語言很屌，感受要顛覆後端語言的節奏。

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

---

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

---

---

    $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經過使用管道字符(|)添加到表達式和指令中。

• 向表達式添加過濾器

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

---

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

---

• 向指令添加過濾器

添加方法是同樣的；

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

---

• 過濾輸入

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

<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>

---