AngularJs中组件、过滤器、自定义过滤器的使用
2017-04-27 19:26
656 查看
今天跟大家分享一些关于组件、过滤器、自定义过滤器方面的知识
组件化: 将页面中可以重复使用的标签封装成一个组件,方便这一部分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)。否则页面上不会输出相关的信息。
相关文章推荐
- AngularJs中组件、过滤器、自定义过滤器的使用
- angularJS实现二级联动查询以及自定义过滤器的使用
- angularJs-----$filter过滤器使用 自定义过滤器
- AngularJs学习之一使用自定义的过滤器
- angularJs - $filter过滤器使用和自定义过滤器
- AngularJS中过滤器的使用与自定义实例代码
- angularJs-----$filter过滤器使用 自定义过滤器
- angularjs-过滤器中,使用自定义服务
- vue组件化挖矿之旅(三):vue-cli 自定义过滤器的使用
- Table 组件使用指南之十八:自定义Date类型字段过滤器
- 使用AngularJS创建自定义的过滤器的方法
- Angularjs学习笔记——AngularJS中$filter过滤器使用(自定义过滤器)
- AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
- 详解AngularJS中$filter过滤器使用(自定义过滤器)
- AngularJS中过滤器的使用与自定义实例代码
- 使用AngularJS创建自定义的过滤器的方法
- angularJS自定义过滤器使用
- angularJS实现二级联动查询以及自定义过滤器的使用
- 说说Android 两种为自定义组件添加属性的使用方法和区别
- spring security 2中使用通过自定义过滤器实现多登录页面