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

来源：互联网发布：云计算解决方案编辑：程序博客网时间：2024/05/22 04:45

过滤指令通过一个 | 管道字符插入到表达式和指令中
案例详解：
<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>

阅读全文

0 0