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=‘[email protected]‘">        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>

AngularJS----基本操作