您的位置：首页 > Web前端 > AngularJS

【07】AngularJS Filters

2016-02-22 14:16 661 查看

AngularJSFilters

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS过滤器可用于转换数据：

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。

<divng-app="myApp"ng-controller="personCtrl">

FirstName:<inputtype="text"ng-model="firstName"><br>

LastName:<inputtype="text"ng-model="lastName"><br>

<br>

FullName:{{firstName+""+lastName}}

</div>

<scriptsrc="personController.js"></script>

personController.js

angular.module('myApp',[]).controller('personCtrl',function($scope){

$scope.firstName="John",

$scope.lastName="Doe",

$scope.fullName=function(){

return$scope.firstName+""+$scope.lastName;

});

uppercase过滤器将字符串格式化为大写：

<divng-app="myApp"ng-controller="personCtrl">

<p>姓名为{{lastName|uppercase}}</p>

</div>

lowercase过滤器将字符串格式化为小写：

<divng-app="myApp"ng-controller="personCtrl">

<p>姓名为{{lastName|lowercase}}</p>

</div>

currency过滤器将数字格式化为货币格式：

<divng-app="myApp"ng-controller="costCtrl">

<inputtype="number"ng-model="quantity">

<inputtype="number"ng-model="price">

<p>总价={{(quantity*price)|currency}}</p>

</div>

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

orderBy过滤器根据表达式排列数组：

<divng-app="myApp"ng-controller="namesCtrl">

<ul>

<ling-repeat="xinnames|orderBy:'country'">

{{x.name+','+x.country}}

</li>

</ul>

<div>

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter过滤器从数组中选择一个子集：

<divng-app="myApp"ng-controller="namesCtrl">

<p><inputtype="text"ng-model="test"></p>

<ul>

<ling-repeat="xinnames|filter:test|orderBy:'country'">

{{(x.name|uppercase)+','+x.country}}

</li>

</ul>

</div>

魔芋练习：

<!DOCTYPEhtml>

<htmllang="zh-cn">

<head>

<metacharset="utf-8">

<metaname="renderer"content="webkit">

<!--360,以webkit内核进行渲染-->

<metahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">

<!--以最新内核进行渲染。-->

<metahttp-equiv="Cache-Control"content="no-siteapp"/>

<!--百度禁止转码-->

<title>moyudemo</title>

<metaname="keywords"content="demo测试魔芋">

<metaname="description"content="魔芋的测试示例">

<metaname="author"content="魔芋,15000720652@163.com,http://www.cnblogs.com/moyuling/">

<metaname="robots"content="index,follow">

<!--定义网页搜索引擎索引方式-->

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<scriptsrc="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

<style>

</style>

</head>

<body>

<divng-app="myApp"ng-controller="myCtrl">

<inputtype="text"ng-model="firstName">

<inputtype="text"ng-model="lastName">

<p>{{firstName+''+lastName}}</p>

<p>{{firstName|uppercase}}</p>

<p>{{price|currency}}</p>

<ul>

<ling-repeat="xinmoyuList|orderBy:'country'">

{{x.name+","+x.country}}

</li>

</ul>

<p>filter</p>

<p>

<inputtype="text"ng-model="test">

</p>

<ul>

<ling-repeat="xinmoyuList|filter:test|orderBy:'country'">

{{x.name+","+x.country}}

</li>

</ul>

</div>

<script>

varapp=angular.module('myApp',[]);

app.controller('myCtrl',function($scope){

$scope.firstName="mo";

$scope.lastName="yu";

$scope.price=123;

$scope.moyuList=[{

name:"上海",

country:"2上海市"

},{

name:"湖北",

country:"1武汉"

},{

name:"湖南",

country:"3长沙"

}]

})

</script>

</body>

</html>

结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航