过滤器 |
描述 |
currency |
格式化数字为货币格式。 |
filter |
从数组项中选择一个子集。 |
lowercase |
格式化字符串为小写。 |
orderBy |
根据某个表达式排列数组。 |
uppercase |
格式化字符串为大写。 |
内容中:数值转为货币格式
<p>总价 = {{ (quantity * price) | currency }}</p>
排序
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
内容中:转小写
<p>姓名为 {{ lastName | lowercase }}</p>
内容中:转大小写
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-model="name"/>
<input type="text" ng-model="age"/>
<!--z转换为大/小写-->
<!--<p>调用控制器里的函数:{{info()|uppercase}}</p>-->
<p>调用控制器里的函数:{{info()|lowercase}}</p>
</div>
<script type="text/javascript">
var app=angular.module('myApp',[]);
app.controller("myCtrl",function($scope){
$scope.name="Youyuanyuan";
$scope.age=10;
$scope.info=function(){
//注意变量前加上$scope
return $scope.name+" "+$scope.age;
}
})
</script>
</body>
排序:在ng-repeat之后
-
- {{x}}
-
- {{x.name+" "+x.age}}
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-model="name" />
<input type="text" ng-model="num" />
<p>{{"名称:"+name+",单价:"+price+",数量:"+num}}</p>
<p>总价:{{ (price * num) | currency }}</p>
</div>
<ul ng-controller="myCtrl">
<!--数组排序-->
<li ng-repeat="x in sum|orderBy">{{x}}</li>
</ul>
<ul ng-controller="myCtrl">
<!--对象排序-->
<li ng-repeat="x in info|orderBy:'age'">{{x.name+" "+x.age}}</li>
</ul>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope) {
$scope.name = "apple";
$scope.num = 10;
$scope.price = 20;
$scope.sum =[10,30,20];
$scope.info=[{name:"youyunayuan",age:20},
{name:"youqijia",age:30},
{name:"youlonglong",age:10},
{name:"zhengshaonong",age:5}];
})
</script>
</body>