AngularJS變數及過濾器Filter用法分析

AngularJS變數及過濾器Filter用法分析_AngularJS

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了AngularJS變數及過濾器Filter用法。分享給大家供大家參考，具體如下：

1. 關於部分變數的操作

設定變數：

ng-init="hour=14" //設定hour變數在DOM中 使用data-ng-init 更好些$scope.hour = 14; //設定hour變數在js中

使用變數：

(1) 如果是在DOM 相關的 ng-*** 屬性裡直接寫變數名

如：

<p ng-show="hour > 13">I am visible.</p>

(2) 如果是在控制器HTML 中但是不在 ng屬性裡

使用{{變數名}}

如：

{{hour}}

(3) 當然第三種就是上面的在js中使用

加上對象名 $scope.

$scope.hour

(4) 在表單控制項中 ng-model中的變數可以直接

同時在 html 中使用 {{變數名}}

<p>Name: <input type="text" ng-model="name"></p><p>You wrote: {{ name }}</p>

還可以通過 ng-bind 屬性進行變數綁定

<p>Name: <input type="text" ng-model="name"></p><p ng-bind="name"></p>

(5) 可以直接在ng的屬性或變數中使用運算式

會自動幫你計算需要符合js文法

ng-show="true?false:true"{{5+6}}<div ng-app="" ng-init="points=[1,15,19,2,40]">  <p>The third result is <span ng-bind="points[2]"></span></p></div>

2. js中的變數迴圈

<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <ul>  <li ng-repeat="x in names">   {{ x }}  </li> </ul></div>

3.變數的過濾 filter

Filter         Description
currency    以金融格式格式化數字
filter          選擇從一個數組項中過濾留下子集。
lowercase   小寫
orderBy     通過運算式將數組排序
uppercase   大寫

如：

<p>The name is {{ lastName | uppercase }}</p>

當然多個函數封裝可以使用 |

<p>The name is {{ lastName | uppercase | lowercase }}</p>//排序函數的使用<ul> <li ng-repeat="x in names | orderBy:'country'">  {{ x.name + ', ' + x.country }} </li></ul>//通過輸入內容自動過濾顯示結果<div ng-app="" ng-controller="namesCtrl">  <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></div>

names | filter:test | orderBy:'country'
就是將names數組中的項按照 test表單值進行篩選
然後以 names中的子項目 country 進行排序

自訂過濾器：

<!DOCTYPE html><html ng-app="HelloApp"><head><title></title></head><body ng-controller="HelloCtrl"> <form>   <input type="text" ng-model="name"/> </form> <div>{{name|titlecase}}</div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script type="text/javascript">  // 編寫過濾器模組  angular.module('CustomFilterModule', [])      .filter( 'titlecase', function() {    return function( input ) {      return input.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});  }  });  // 實際展示模組  // 引入依賴的過濾器模組 CustomFilterModule  angular.module('HelloApp', [ 'CustomFilterModule'])    .controller('HelloCtrl', ['$scope', function($scope){    $scope.name = '';  }])</script></body></html>

希望本文所述對大家AngularJS程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More