過濾器：{{資料|過濾器:參數}} 格式化展示資料。 "|"相當於管道，可以通過多個"|"來同時使用多個過濾器。 ":"表示參數,多個冒號多個參數。
demo.html：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>AngularJS</title><script src="angular.min.js"></script> <!-- 引入AngularJS架構 --></head><body ng-app="App"><ul ng-controller="DemoController"><li>{{price|currency:'￥'}}</li> <!-- {{資料|currency}} 格式化成貨幣 --><li>{{now|date:'yyyy-MM-dd hh:mm:ss'}}</li><li>{{myArr|filter:'s'}}</li> <!-- 只輸出數組中包含's'的項 --><li>{{students|filter:{age:12} }}</li> <!-- 把age為12的對象過濾出來。 如果參數是對象,需要在對象的"}"後面再加一個空格 --><li>{{students|json}}</li> <!-- 將JS對象轉成JSON字串(一般用於調試) --><li>{{myArr|limitTo:2}}</li> <!-- limitTo截取數組的前2項;-1表示最後一項 --><li>{{str|uppercase}}</li> <!-- uppercase 轉成大寫 --><li>{{str|lowercase}}</li> <!-- lowercase 轉成小寫 --><li>{{num|number}}</li> <!-- number 純數字字串轉成數字,(預設保留3位小數) --><li>{{num|number:2}}</li> <!-- number 保留2位小數 --><li>{{myArr|orderBy}}</li> <!-- 按ask碼進行排序 --><li>{{myArr|orderBy:'':true}}</li> <!-- 兩個參數兩個":",第二個參數表示倒序 --><li>{{students|orderBy:'age':true}}</li> <!-- 第一個參數表示按"age"排序 --><li>{{str|uppercase|limitTo:3}}</li> <!-- "|"相當於管道,可以通過多個"|"來使用多個過濾器 --></ul><script>var App = angular.module('App',[]);App.controller("DemoController",['$scope',function($scope) {$scope.price = 11.1111111; $scope.now = new Date();$scope.myArr = ['html','css','js'];$scope.students = [{name:"張三",age:12},{name:"張四",age:15},{name:"張五",age:12}];$scope.str = "Hello";$scope.num = "10.666666666";}]);</script></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
