Angularjs中使用Filters詳解_AngularJS
May 16, 2016 pm 03:11 PMFilter作用就是接收一個輸入,透過某個規(guī)則處理,然後傳回給使用者處理後的結果。 Filter可以用在模板、控制器、或服務,同時也會很容易自訂一個Filter過濾器。
在模板中使用Filter
Filter可以用來在視圖範本中使用一下語法運算式:
{{ expression | filter }}
例如:格式{{ 12 | currency }}是使用currency的filter用法,讓數(shù)字12過濾為貨幣形式,結果是$12.00。
Filter可以套用到另一個過濾的結果。這就是所謂的“chaining”,使用語法如下:
{{ expression | filter1 | filter2 | ... }}
Filter中可能需要參數(shù)。語法為:
{{ expression | filter:argument1:argument2:... }}
例如:格式{{ 1234 | number:2 }}是使用number的filter用法,將數(shù)字1234過濾為有兩位數(shù)小數(shù)點的數(shù)字,結果為:1,234.00 。
在controller、services、directives中使用filter
?你可以在controller、services、directives中使用filter。
為此,你需要將依賴項名稱注入到你的controller/service/directive中:filter;例如:一個過濾器是number,你就需要透過使用依賴注入numberFilter。注入的參數(shù)是一個函數(shù),該函數(shù)將值作為第一個參數(shù),然後用第二個參數(shù)來篩選參數(shù)。
下面的範例使用了叫做filter的Filter過濾器。這個filter可以在sub arrays的基礎上減少arrays。也可以應用在視圖模板的標記,就像:{{ctrl.array|filter:'a'}},這將為‘a(chǎn)'做一個全文搜尋。然而,在視圖模板中使用filter將會重新對每一個filter過濾,如果數(shù)組比較大的會是載入多次的。
因此下面的範例直接呼叫在控制器中的filter。透過這個,控制器可以在需要是呼叫filter(例如:當後端資料載入時或filter的表達式改變時)。
index.html:
<div ng-controller="FilterController as ctrl"> <div> All entries: <span ng-repeat="entry in ctrl.array">{{entry.name}} </span> </div> <div> Entries that contain an "a": <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span> </div> </div>
script.js:
angular.module('FilterInControllerModule', []). controller('FilterController', ['filterFilter', function(filterFilter) { this.array = [ {name: 'Tobias'}, {name: 'Jeff'}, {name: 'Brian'}, {name: 'Igor'}, {name: 'James'}, {name: 'Brad'} ]; this.filteredArray = filterFilter(this.array, 'a'); }]);
結果為:
All entries: Tobias Jeff Brian Igor James Brad Entries that contain an "a": Tobias Brian James Brad
建立自訂filters:
寫自己的filter是非常簡單的:只需要在你的模組中註冊一個新的filter factory函數(shù)。在內部,這裡用了filterProvider。這個factory函數(shù)應該會傳回一個新的filter函數(shù)並且將輸入值作為第一個參數(shù)。任何過濾器參數(shù)都會作為附加參數(shù)傳遞到過濾器函數(shù)中。
這個濾波器函數(shù)應該是一個單純的函數(shù)。這意味著它應該stateless 和 idempotent。當輸入的函數(shù)變化時,angular依賴這些屬性並且執(zhí)行filter。
注意:filter的名稱必須是有效的angular表達式識別碼。例如uppercase或orderBy。名字是不允許有特殊的字符,如連字符和點是不允許的。如果你希望你的濾鏡有名稱空間,那麼你可以使用大寫(myappSubsectionFilterx)或底線(myapp_subsection_filterx)。
下面的範例filter是反寫一個字串。另外,它可以再加一個條件使字串大寫。
index.html
<div ng-controller="MyController"> <input ng-model="greeting" type="text"><br> No filter: {{greeting}}<br> Reverse: {{greeting|reverse}}<br> Reverse + uppercase: {{greeting|reverse:true}}<br> Reverse, filtered in controller: {{filteredGreeting}}<br> </div>
script.js
angular.module('myReverseFilterApp', []) .filter('reverse', function() { return function(input, uppercase) { input = input || ''; var out = ""; for (var i = 0; i < input.length; i++) { out = input.charAt(i) + out; } // conditional based on optional argument if (uppercase) { out = out.toUpperCase(); } return out; }; }) .controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) { $scope.greeting = 'hello'; $scope.filteredGreeting = reverseFilter($scope.greeting); }]);
結果為:
No filter: hello Reverse: olleh Reverse + uppercase: OLLEH Reverse, filtered in controller: olleh
有狀態(tài)的filters(Stateful filters)
強烈建議寫有狀態(tài)的filters,因為這些不能用angular進行最佳化,這往往會導致效能問題。許多有狀態(tài)的filters轉換成無狀態(tài)的filters僅僅透過揭露隱藏的狀態(tài)作為model,並且將其轉換為一個filter參數(shù)。
然而,如果你需要寫一個有狀態(tài)的filters,你必須將filter標記為$stateful,這也意味著它將在每一個$digest週期內執(zhí)行一次或多次。
index,html
<div ng-controller="MyController"> Input: <input ng-model="greeting" type="text"><br> Decoration: <input ng-model="decoration.symbol" type="text"><br> No filter: {{greeting}}<br> Decorated: {{greeting | decorate}}<br> </div>
script.js:
angular.module('myStatefulFilterApp', []) .filter('decorate', ['decoration', function(decoration) { function decorateFilter(input) { return decoration.symbol + input + decoration.symbol; } decorateFilter.$stateful = true; return decorateFilter; }]) .controller('MyController', ['$scope', 'decoration', function($scope, decoration) { $scope.greeting = 'hello'; $scope.decoration = decoration; }]) .value('decoration', {symbol: '*'});
結果為:
No filter: hello Decorated: *hello*
下次會寫一篇angularjs中filter的常用用法。

熱AI工具

Undress AI Tool
免費脫衣圖片

Undresser.AI Undress
人工智慧驅動的應用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

VUE3是目前前端開發(fā)中較為流行的一種框架,其所提供的基礎功能能夠極大的提升前端開發(fā)效率。其中filters就是VUE3中非常有用的工具,使用filters可以很方便地篩選資料、過濾資料處理。那什麼是filters呢?簡單來說,filters就是VUE3中的過濾器。它們可以用於處理被渲染的數(shù)據(jù),以便在頁面中呈現(xiàn)出更理想的結果。 filters是一些

Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲(yún)二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲(yún)課堂JavaScript 高級框架設計視頻教程》就對了。

在現(xiàn)今資訊時代,網(wǎng)站已成為人們獲取資訊和交流的重要工具。一個響應式的網(wǎng)站能夠適應各種設備,為使用者提供優(yōu)質的體驗,成為了現(xiàn)代網(wǎng)站開發(fā)的熱點。本篇文章將介紹如何使用PHP和AngularJS建立響應式網(wǎng)站,進而提供優(yōu)質的使用者體驗。 PHP介紹PHP是一種開源的伺服器端程式語言,非常適合Web開發(fā)。 PHP具有許多優(yōu)點,如易於學習、跨平臺、豐富的工具庫、開發(fā)效

Vue.js是一款受歡迎的JavaScript框架,它提供了許多實用的功能和工具來幫助前端開發(fā)人員開發(fā)優(yōu)秀的應用程式。其中,filters(過濾器)是Vue.js中一個非常有用的功能,它可以用於資料的格式化和過濾。在Vue中,filters相當於模板中的管道,可以用來處理和轉換資料。例如,我們可以使用filters把日期格式從原始日期

隨著網(wǎng)路的不斷發(fā)展,Web應用已成為企業(yè)資訊化建設的重要組成部分,也是現(xiàn)代化工作的必要手段。為了讓Web應用能夠方便開發(fā)、維護和擴展,開發(fā)人員需要選擇適合自己開發(fā)需求的技術框架和程式語言。 PHP和AngularJS是兩種非常流行的Web開發(fā)技術,它們分別是伺服器端和客戶端的解決方案,透過結合使用可以大大提高Web應用的開發(fā)效率和使用體驗。 PHP的優(yōu)勢PHP

隨著Web技術的快速發(fā)展,單頁Web應用程式(SinglePageApplication,SPA)已成為越來越流行的Web應用程式模型。相較於傳統(tǒng)的多頁Web應用程序,SPA的最大優(yōu)勢在於使用者感受更加流暢,同時伺服器端的運算壓力也大幅減少。在本文中,我們將介紹如何使用Flask和AngularJS來建構一個簡單的SPA。 Flask是一款輕量級的Py

隨著網(wǎng)路的普及和發(fā)展,前端開發(fā)已變得越來越重要。身為前端開發(fā)人員,我們需要了解並掌握各種開發(fā)工具和技術。其中,PHP和AngularJS是兩種非常有用且受歡迎的工具。在本文中,我們將介紹如何使用這兩種工具進行前端開發(fā)。一、PHP介紹PHP是一種流行的開源伺服器端腳本語言,它適用於Web開發(fā),可以在Web伺服器和各種作業(yè)系統(tǒng)上運作。 PHP的優(yōu)點是簡單、快速、便

這篇文章介紹的內容是關於AngularJS基礎入門介紹,有著一定的參考價值,現(xiàn)在分享給大家,有需要的朋友可以參考一下。
