angularJS過濾器 {{name}}

angularJS

      首先我們要對angularJS有一定簡單的瞭解的過濾器

angularJS過濾器(大標題小標題

        |:管道符號,用來分割數據和過濾器

currency:貨幣金額的操作

      代碼示例:(此次展現了所有代碼,下次將只展現核心代碼)
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>過濾器</title>
<script src="angular.min.js"></script>
<script>
var m=angular.module('myApp',[]);
m.controller('Aaa',['$scope',function($scope){
$scope.price='658213797';
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<p>{{price|currency}}</p>
</div>
</body>
</html>
頁面結果展示:
可通過currency中增加參數的方法來改變貨幣的單位(類似與傳參根據參數的不同,可進行多參傳遞currecy:"一參":"二參":"三參")

代碼示例:
<p>{{price|currency:"¥"}}</p>
頁面展示結果示例:

number:將數字轉換爲文本的格式

代碼示例:
<p>{{price|number}}</p>
頁面展示結果示例:(只有分隔符,沒有小數點以及貨幣符號)

當數字有小數點時(數字爲6215387216.7253726)會自動截取小數點前三位(也可通過傳參的方式對小數點的截取個數進行傳參)number:參數0-n

頁面展示結果示例:

代碼示例:(截取兩位)
<p>{{price|number:2}}</p>
頁面展示結果示例:

lowercase/uppercase:轉換大小寫

json:可對json格式進行調試(注意:要使用在<pre>標籤中因爲該標籤可以識別空格和轉行)

代碼示例:
<script>
var m=angular.module('myApp',[]);
m.controller('Aaa',['$scope',function($scope){
$scope.json={"name":"Lily","age":"20"};
}]);
</script>
<div ng-controller="Aaa">
<pre>{{json|json}}</pre><!--識別空格和換行-->
</div>
  
頁面展示結果示例:
limitTo:截取的操作,針對數組,字符串也可以

代碼示例:
$scope.con=['a','b','c','d'];
<p>{{con|limitTo:2}}</p>
頁面展示結果示例:

date:日期格式化,輸入毫秒數然後進行計算輸出日期(可在冒號後進行傳參用來規定日期的格式可在官網上詳細查詢參數的類型)
代碼示例:
$scope.con='32784674682149';
<p>{{con|date}}</p>
頁面展示結果示例:

代碼示例:(有參數)
<p>{{con|date:'yyyy'}}</p>
頁面展示結果示例:
orderBy:排序針對數據針對value
代碼示例:(如果是字符串排序則是按照字符的順利,數字則是大小)
$scope.con=[{"color":"red","age":"20"},
{"color":"blue","age":"30"},
{"color":"yellow","age":"40"},
{"color":"white","age":"10"}];
}]);
<p>{{con|orderBy:'color'}}</p>
頁面展示結果示例:

代碼示例:(有第二個參數:如果是true,則是從大排到小;如果是false,則是從小排到到)
<p>{{con|orderBy:'color':true}}</p>
頁面展示結果示例:

filter:過濾針對數據當中的value值對key值無用。也可匹配vaule當中包含的值,當第二個參數爲true時是全局匹配

代碼示例:
<p>{{con|filter:'20'}}</p>
頁面展示結果示例:



過濾器擴展

  • 可組合使用過濾器
  • JS中使用過濾器    
— $scope/$rootScope/$timeout

—$filter(使用依賴注入的方法注入)
代碼示例:(使用大寫轉換器轉換示例)

m.controller('Aaa',['$scope','$filter',function($scope,$filter){
$scope.name = $filter('uppercase')('hello');
}]);
<p>{{name}}</p>
頁面展示結果示例:
代碼示例:(使用數字轉換器並進行傳參)

$scope.name = $filter('number')('42738148.3678213',1);
頁面展示結果示例:
  • 自定義過濾器   
—angular.module

 >>controller/run (可以不適用控制器controller)
代碼示例:
var m=angular.module('myApp',[]);
m.run(['$rootScope',function($rootScope) {
$rootScope.name = 'hello';
}]);
<div >
<p>{{name}}</p><!--識別空格和換行-->
</div>

頁面展示結果示例:
>>filter(在JS中也可以使用)
代碼示例:(將字符串的首字符轉換爲大寫)

var m=angular.module('myApp',[]);
m.filter('firstUpper',function(){
return function(str){//在此函數進行傳參(str,參數)
return str.charAt(0).toUpperCase()+str.substring(1);
}
});
m.controller('Aaa',['$scope','$filter',function($scope,$filter){
$scope.name = 'hello';
}]);

<p>{{name|firstUpper}}</p> //若傳參
頁面展示結果示例:









發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章