1. 程式人生 > >angular過濾器的使用和自定義過濾器

angular過濾器的使用和自定義過濾器

過濾器的使用。一種是在html中的使用,一種是在js程式碼中的使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>過濾器</title>
		<script src="day2/src/angular.js"></script>
		<style type="text/css">
		</style>
	</head>
	<body>
		
		<div ng-app="fristApp">
			<div ng-controller="fristController">
				
				<!--多個過濾器之間用 | 連結-->
				
				<!--引數的實質就是把引數新增在數字前面(在貨幣符號處使用)-->
				{{money | currency}}<br />
				{{money | currency:'¥'}}<br />
				
				{{str | uppercase}}<br />
				{{json | json}}<br />
				
				<!-- 會進行四捨五入-->
				{{num | number:3}}<br />
				
				<!--時間 只有MM是大寫-->
				{{currenttime | date:'yyyy-MM-dd-hh'}}
				
				<!--字串的切割-->
				{{strr | limitTo:3}}
				{{strr | limitTo:-3}}
				
				<!--按照person的age進行排序-->
				<ul>
					<li ng-repeat="person in arr | orderBy:'age':false">
						{{person.name}}
					</li>
				</ul>
				
				<!--true 位於第二個位置,其中num是不能加“”的,上面的加“”是因為name是他的一個屬性-->
				<ul>
					<li ng-repeat="n in [2,43,432,453,65] | orderBy:num:true">
						{{n}}
					</li>
				</ul>
				
				
				<!--根據person的屬性進行過濾-->
				<input type="text" ng-model="name" />
				<ul>
					<li ng-repeat="person in arr | filter:{'name':name}">
						{{person.name}}
					</li>
				</ul>
				
				
			</div>
			
		</div>
	</body>
	<script type="text/javascript">
		var myApp = angular.module('fristApp',[]);
		myApp.controller('fristController',function($scope,$filter){
			$scope.money = 100;
			$scope.str = "fsHIOiiiiIU"	;
			$scope.json = {name:"zhangsan",age:40};
			$scope.num = 12432432432;
			var time = new Date();
			$scope.currenttime = time.getTime();
			
			$scope.strr = "fujichao";
			
			$scope.arr = [
				{name:'zhangsan',age:33},
				{name:'zhangsan2',age:30},
				{name:'zhangsan3',age:44},
				{name:'zhangsan4',age:3}
			];
			
			
			// 如果陣列的元素相等的話,這兩個元素的記憶體地址是相同的。
			var arrnum = [12,12,33,44];
			if(arrnum[0]===arrnum[1]){
				console.log("fji")
			};
			
			/* 在JS中使用過濾器*/
			
			// $filter(過濾器的名字)(物件,條件)
			var val =  $filter('currency')($scope.money,'¥');
			console.log(val);
			
			var string1 = "fssdHIUHIjiojjOIJIOJ"
			var valStr = $filter('uppercase')(string1);
			console.log(valStr)
		})
	</script>
</html>


相關推薦

Angular過濾器定義過濾器

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入

angular過濾器的使用定義過濾器

1、過濾器可以直接在表示式{{ }}裡使用,也可以作為服務,依賴注入的形式$filter使用,例如: $scope.name = $filer('uppercase')('hello');//第一個括號寫要使用哪種過濾器,第二個括號寫要過濾的引數 $scope.name = $filer('nu

angular過濾器的使用定義過濾器

過濾器的使用。一種是在html中的使用,一種是在js程式碼中的使用。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>過濾器<

Django(定義過濾器定義標簽)

bsp replace 取數據 獲取 key-value cut ext 兩個 rom 模版是一個用django模版語言標記過的python字符串。模版可以包含模版標簽和變量。 模版標簽是在一個模版裏起作用的標記。比如,一個模版標簽可以產生控制結構的內容(if或者

定義過濾器定義標籤

自定義標籤和過濾器 需要執行的3個步驟: 1. 在app中建立templatetags模組(必須的) 2. 建立任意 .py 檔案,如:my_tags.py 3. 建立任意  .py檔案, 例如:my_tags.py 自定義過濾器 舉例: 增加一個乘法過濾器 修改setting

django中使用定義過濾器定義標籤

自定義過濾器 首先在app底下新建一個templatetags目錄,裡面新增兩個檔案,目錄結構如下: 然後在settings.py中把templatetags目錄作為app註冊 INSTALLED_APPS = [ 'django.cont

Django定義過濾器定義標籤

自定義過濾器   1、確認app已在setting中進行註冊;   2、在app模板下建立名為templatetags的模板(切記名字一定不能改,只能是templatetags);   3、在模板下建立任意名稱的.py檔案;   4、在剛剛建立的.py檔案中定製過濾器   -具體語法  fr

angular內建過濾器以及定義過濾器

  ng內建了九種過濾器,使用方法都非常簡單,看文件即懂。不過為了以後不去翻它的文件,我在這裡還是做一個詳細的記錄。   1. currency (貨幣處理)   使用currency可以將數字格式化為貨幣,預設是美元符號,你可以自己傳入所需的符號,例如我傳入人民幣: {{num | currency

angular中的定義過濾器

1.1. 正則表示式 1.1.1. 建立方式 1、直接量語法: /pattern/attribute 2、建立RegExp物件的語法 new RegExp(pattern,attribute); 注意: 1、引數 pattern 是一個字串,指定了

angularJs-----$filter過濾器使用 定義過濾器

1.內建過濾器 * $filter 過濾器,是angularJs中用來處理資料以更好的方式展示給我使用者。比如格式化日期,轉換大小寫等等。 * 過濾器即有內建過濾器也支援自定義過濾器。內建過濾器很多,可以百度。關鍵是如何使用: * 1.在HTML中直接使用內建過

Flask框架(flask模板(jinja2)與字串過濾器、列表過濾器以及定義過濾器)

模板變數 : {{name}} 1. 模板的定義: 模板變數 : {{name}} 2. 模板的渲染:  render_template("模板名字",鍵=值,鍵=值)         例如:  render_template

AngularJS過濾器以及定義過濾器

過濾器是用來更改修改資料,並且可以在表示式或使用管道符指令將其歸入。以下是常用的過濾器的列表。 一.AngularJS的filter過濾器 向表示式新增過濾器:可以通過一個管道字元(“|”)和一個過濾器新增到表示式中,可以使用多個過濾器,用管道字元(“|”)隔開就好。 1.

Angular 定義過濾器

scope urn rip htm ng- 顯示 () ctrl ont <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta charset="UTF-8">

Angular——定義過濾器

視圖 lan bsp doctype html 進行 指導 src 就是 基本介紹 除了使用AngularJS內建過濾器外,還可以根業務需要自定義過濾器,通過模塊對象實例提供的filter方法自定義過濾器。 基本使用 (1)input是將綁定的數據以參數的形式傳入 (2)i

django-定義過濾器(simple_tagfilter)

title gis 定義 tle filter www simple bsp djang 關於Django的模板這裏有詳細介紹http://www.runoob.com/django/django-template.html 1、在app下創建templatetags的目錄

定義過濾器標籤

第一步:  在settings中的INSTALLED_APPS配置當前app,不然django無法找到自定義的simple_tag. 第二步: 在app中建立templatetags模組(模組名只能是templatetags) 第三步: 建立py檔案 from django imp

定義過濾器標籤,動態顯示選單許可權

1、在settings中的INSTALLED_APPS配置當前app,不然django無法找到自定義的simple_tag. 2、在app中建立templatetags模組(模組名只能是templatetags)   3、建立任意 .py 檔案,如:my_tags.py 1 from

定義過濾器標簽

html渲染 nod inpu orm list r語 -- 允許 過濾器 1、在settings中的INSTALLED_APPS配置當前app,不然django無法找到自定義的simple_tag. 2、在app中創建templatetags模塊(模塊名只能是templa

Django定義過濾器標籤

Django的模板語言包含了各種各樣的內建標籤和過濾器來滿足你的應用需求,不過有時候你也會發現你的需要的功能不在內建的功能中,這時候你可以通過Python語言自定義標籤和過濾器來擴充套件模板引擎,然後在你的模板中使用 {% load %} 來載入使用它們。 首先建立好包檔案: 在你的app下

vue定義過濾器的建立使用

過濾器的作用:實現資料的篩選、過濾、格式化。 vue1.*版本是有內建的過濾器,但是在vue2.*所有的版本都已經沒有自帶的過濾器了。 1、過濾器建立   過濾器的本質 是一個有引數 有返回值的方法