AngularJs中组件、过滤器、自定义过滤器的使用
来源:互联网 发布:python splinter教程 编辑:程序博客网 时间:2024/06/05 09:25
今天跟大家分享一些关于组件、过滤器、自定义过滤器方面的知识
组件化: 将页面中可以重复使用的标签封装成一个组件,方便这一部分UI重复使用 类似于JS中的函数,封装了一部分处理代码,通过函数调用就可以重复使用这些代码封装一个简单的组件代码如下:<script> var app = angular.module("myApp", []); app.component("myComp", { template:"<h1>组件化封装的内容<small>这是一个副标题</small></h1>" });</script>调用方式:<my-comp></my-comp>过滤器:
过滤器可以使用一个管道字符(|)添加到表达式和指令中。
(1)字符串大小写转换过滤器
代码如下:<div ng-bind="name"></div> <div ng-bind="name | uppercase"></div> <div ng-bind="name | lowercase"></div>(2)长度限制过滤器代码如下:长度:<input type="text" ng-model="length"><br /> 位置:<input type="text" ng-model="index"> <br /> <ul> <li ng-repeat="u in users | limitTo:length:index"> <span ng-bind="u.userID"></span>**** <span ng-bind="u.username"></span>**** <span ng-bind="u.nickname"></span> </li> </ul>(3)JSON过滤器
代码如下:<span ng-bind="users|json"></span>(4)日期时间过滤器<span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'"></span><br /> <span ng-bind="date | date:'yyyy年MM月dd日'"></span><br /> <span ng-bind="date | date:'hh:mm:ss'"></span><br />(5)货币格式过滤器货币过滤器输出:<span ng-bind="price | currency"></span><br /> 货币过滤器输出:<span ng-bind="price | currency:'人民币¥'"></span><br /> 货币过滤器输出:<span ng-bind="price | currency:'¥':3"></span><br />自定义过滤器:app.filter(name, fn):用于定义一个自定义过滤器 name:过滤器名称 fn:过滤器处理函数过滤器中,直接return function(value) {} 通过闭包函数来实现数据处理,固定语法结构! value参数:第一个参数,用于接收要处理的数据:数据就是过滤器管道符前面变量中的数据<div ng-controller="myCtrl"> <div ng-bind="name"></div> <div ng-bind="name | myfilter"></div></div>var app = angular.module("myApp", []); app.filter("myfilter", function() { return function(value) { value = value.toUpperCase(); return value; } });app.controller("myCtrl", function($scope) { $scope.name = "jerry"; });标注:过滤器中的数据处理完成,一定要返回输出(return value)。否则页面上不会输出相关的信息。
0 0
- AngularJs中组件、过滤器、自定义过滤器的使用
- AngularJs中组件、过滤器、自定义过滤器的使用
- AngularJS的组件化、过滤器、自定义过滤器之旅
- angularJS自定义过滤器使用
- angularjs中过滤器使用
- angularJs-----$filter过滤器使用 自定义过滤器
- angularJs-----$filter过滤器使用 自定义过滤器
- angularJS过滤器和自定义的过滤器
- angularJS中filter(过滤器)的使用
- AngularJS中多种过滤器的使用
- AngularJS 过滤器\自定义过滤器 $filter
- AngularJS过滤器以及自定义过滤器
- Angularjs 的过滤器使用小结
- angularJS实现二级联动查询以及自定义过滤器的使用
- angularJS---自定义过滤器
- angularjs自定义过滤器demo
- angularjs自定义过滤器
- Angularjs自定义过滤器
- 安卓工具类之获取网络状态工具类
- 使用volley进行网络请求
- centos7编译安装最新版Git
- unity_shader入门 oneV
- 列表拖动排序
- AngularJs中组件、过滤器、自定义过滤器的使用
- Angular快速入门---过滤器篇
- NSDictionary、NSMutableDictionary的基本用法
- Spring Boot实战之Filter实现使用JWT进行接口认证
- 实现jQuery-form.js实现异步上传文件
- 浅谈Java三大特性--封装
- (四)数据库数据更新
- Mondriaan's Dream 瓷砖覆盖地板 编程之美
- 机器学习(二):懒惰学习——近邻分量