- 過濾器(Filters)
angularJS在資料格式顯示方面，他們使用過濾器轉換資料，首先我們需要了解過濾器可以處理範圍:
過濾器的格式:
{{ filter_expression | filter : expression : comparator}}
過濾器類型 說明 currency 貨幣格式 filter 搜尋集合符合條件的子集合 lowercase 轉換成小寫型態 orderBy 排序 uppercase 轉換成大寫型態
(1)currency
範例: 當宣告currency會補上$的符號 <body ng-app="myList" >
<div ng-controller='ListController' >
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>unit price: {{item.price | currency}}</span>
<span>total: {{item.price * item.quantity | currency}}</span>
</div>
</body><script>
var myApp = angular.module('myList',[]);
myApp.controller('ListController', function($scope){
$scope.items=[
{title:"apple",quantity:10, price:350},
{title:"banana",quantity:8, price:450},
{title:"star",quantity:7, price:350}
];
});
</script>apple unit price: $350.00 total: $3,500.00
banana unit price: $450.00 total: $3,600.00
star unit price: $350.00 total: $2,450.00
(2) filter
範例:過濾符合條件的資料 <html ng-app="myList">
<head>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller='ListController' >
<input ng-model="searchText">
<div ng-repeat='item in items | filter:searchText'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>unit price: {{item.price | currency}}</span>
<span>total: {{item.price * item.quantity | currency}}</span>
</div>
</body>
</body>
<script>
var myApp = angular.module('myList',[]);
myApp.controller('ListController', function($scope){
$scope.items=[
{title:"apple",quantity:10, price:350},
{title:"banana",quantity:8, price:450},
{title:"star",quantity:7, price:350}
];
});
</script>
</html>apple unit price: $350.00 total: $3,500.00
(3)lowercase
範例: 當輸入apple會自動改為小寫的文字 <div ng-app="myApp" ng-controller="lowerController">
<input type="text" name="message" ng-model="message" />
<p> upper case:{{message | lowercase}} </p></div>
<script>
var myApp = angular.module("myApp",[])
myApp.controller("lowerController", function($scope){
});</script>
input:
upper case:apple
(4)orderBy
範例: 當利用ng-repeat印出水果明細，再利用orderBy:'price' 依照單價去排序 <body ng-app='myList' >
<div ng-controller='ListController'>
<div ng-repeat="item in items | orderBy:'price'" >
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>total: {{item.price * item.quantity | currency}}</span>
</div>
</body>
<script>
var myApp = angular.module('myList',[]);
myApp.controller('ListController', function($scope){
$scope.items=[
{title:"apple",quantity:4, price:350},
{title:"banana",quantity:4, price:450},
{title:"start",quantity:4, price:350}
];
});
</script>apple $350.00 total: $1,400.00
start $350.00 total: $1,400.00
banana $450.00 total: $1,800.00
(5) uppercase
範例: 當輸入apple會自動改為大寫的文字 <div ng-app="myApp" ng-controller="upperController">
<input type="text" name="message" ng-model="message" />
<p> upper case:{{message | uppercase}} </p></div>
<script>
var myApp = angular.module("myApp",[])
myApp.controller("upperController", function($scope){
});</script>
input:
upper case:APPLE
留言
張貼留言