angular过滤器使用 自定义过滤器
2024-10-20 07:45:38
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> <div >
<p>名字 : <input type="text" ng-model="firstName" ng-bind="firstName"></p>
<p>名字 : <input type="text" ng-model="lastName" ng-bind="lastName"></p>
<p>输入过滤 : <input type="text" ng-model="text" ng-bind="text"></p> <span>{{(firstName|lowercase)+" "+lastName}}</span>
<span>{{5|currency}} </span> </div>
<ul>
<li ng-repeat="x in names |filter: text |orderBy:country">
{{x.name+','+x.country}}
</li>
</ul>
<script> var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "firstName";
$scope.lastName = "lastName";
$scope.names = [
{ 'name': 's1', 'country': 'china' },
{ 'name': 's2', 'country': 'america' },
{ 'name': 5, 'country': 'america' }, ]; });
</script> </body>
</html>
text 绑定的过滤模型名称 li列表会过滤输入 进行模糊匹配
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> <div >
<p>名字 : <input type="text" ng-model="firstName" ng-bind="firstName"></p>
<p>名字 : <input type="text" ng-model="lastName" ng-bind="lastName"></p>
<p>输入过滤 : <input type="text" ng-model="text" ng-bind="text"></p> <span>{{(firstName|lowercase)+" "+lastName}}</span>
<span>{{5|currency}} </span> </div>
<ul>
<li ng-repeat="x in names |filter: text |orderBy:country">
{{x.name+','+(x.country|reverse)}}
</li>
</ul>
<script> var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "firstName";
$scope.lastName = "lastName";
$scope.names = [
{ 'name': 's1', 'country': 'china' },
{ 'name': 's2', 'country': 'america' },
{ 'name': 5, 'country': 'america' }, ]; });
//自定义一个过滤器反转字符顺序
app.filter('reverse', function () {
return function (text) {
return text.split("").reverse().join("");
} })
</script> </body>
</html>
添加自定义过滤器 接收参数 函数内部处理后返回
最新文章
- javaweb初学记录
- centos 无线网卡安装，网卡rtl8188ee
- .net学习笔记---xml基础知识
- JavaScript - 引用类型
- PostgreSQL同步复制搭建
- Java中的转义字符
- printf()函数
- 阿里云大数据三次技术突围：Greenplum、Hadoop和“飞天”
- vijos 1907 飞扬的小鸟
- http://blog.csdn.net/wxwzy738/article/details/16968767
- C语言1-100连加，求质数，算瑞年检测字母大小写，登录系统
- 移动Web开发小技巧
- DB2常用sql demo
- CodeForces 616B Dinner with Emma
- EasyUI datagrid 使用小结
- JavaScript 图
- C++一个类对象的大小计算
- Flask 视图，中间件
- python（list、字典、元组、字符串方法、文件读写）草稿
- nodejs -Promise