AngularJS杂记7----过滤器filter案例详解

最新推荐文章于 2020-07-02 21:02:37 发布

aigoV

最新推荐文章于 2020-07-02 21:02:37 发布

阅读量321

点赞数

分类专栏： AnjularJS 文章标签： AngularJS指令 AngularJS入门 angularjs过滤器自定义过滤器案例

本文链接：https://blog.csdn.net/aigoV/article/details/77851882

版权

AnjularJS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

过滤指令通过一个 | 管道字符插入到表达式和指令中
案例详解：
<body>
<div ng-app = "myApp" ng-controller = "ctl">
//uppercase过滤器转大写
{{name | uppercase}}
//将数字转化为货币格式
{{price | currency}}
//向指令添加过滤器 orderBy-根据表达式排列数组
<ul>
<li ng-repeat = "x in names | orderBy:'country'">
{{x.name+"=="+x.country}}
</ul>
//filter 过滤输入以过滤出含有某个子串的元素，作为一个子数组来返回
<p>过滤输入</p>
<input type = "text" ng-model = "xx"> //xx作为条件绑定到应用
<ul>
<li ng-repeat = "yy in names" | filter = xx | orderBy:'country'>
{{(x.name | uppercase) + ','+x.country}}
</li>
</ul>
</div>
<script src = "source/myCtrl"></script>
</body>

自定义过滤器 reverse 反转字符转

<body>
<div ng-app = "Myapp" ng-controller = "myCotr">
{{ msg | reverse }};
</div>
<script>
var app = angular.module('Myapp',[]);
app.controller('myCtrl',function($scope){
$scope.msg = "hahaha";
});
app.filter('reverse',function(){
return function(text){
return text.split("").reverse().join("");
}
});
</script>
</body>