美文网首页Ionic 2 花瓣 ..我爱编程
angular 2在ng-style中使用过滤器filter(自

angular 2在ng-style中使用过滤器filter(自

作者: 天亮前被寻找的一只猫 | 来源:发表于2017-09-07 18:15 被阅读58次

先上自己实现的效果图:

我是用ionic2写的项目,要做的功能是根据返回的数据,动态控制绿色部分的显示(主要控制top 和 height,以及里面展示的内容),    基于angular 2的语法. 这里我说下过滤器吧:

1. 自定义管道 pipe.

2.可以在[ngStyle]中使用自定义管道吗?

第一点 自定义pipe.   ................这些东西都可以搜到的.   不论是看官方文档 还是 百度搜 ...... 

切回我们的重点, angular 2在ng-style中可以使用过滤器filter吗?

答案肯定是可以的.

一开始  我 

<div [ngStyle]="{'top':{{item.startTime | bookingTime}}}">  无奈 报错

然后又:

<div style="top:{{item.startTime | bookingTime}}">  无奈 还不对

更奇葩的是,我竟然想把拿到的值扔到input中 用 ng-model 双向数据绑定实现把值传递给定义的变量保存.然后在读取这个变量............  哈哈 ,幸好我没这样试.  

最后   用最终的这种格式,顺利的实现了.

<div [ngStyle]="{'top':(item.startTime|bookingTime)}">

bookingTime  是我自定义管道.    主要处理时间戳,根据时间 控制显示的高度的.  拷贝的时候如果有报错 就试试 | 两端加上或者去掉空格..  我现在这个格式是正确的.

相关文章

  • angular 2在ng-style中使用过滤器filter(自

    先上自己实现的效果图: 我是用ionic2写的项目,要做的功能是根据返回的数据,动态控制绿色部分的显示(主要控制t...

  • Spring Boot使用过滤器Filter

    Spring Boot使用过滤器Filter >> 过滤器Filter介绍Filter也称为过滤器,是处于客户端与...

  • AngularJs过滤器

    在AngularJS中使用过滤器格式化展示数据,在“{{}}”中使用“|”来调用过滤器,使用“:”传递参数。 1、...

  • AngularJS

    过滤器 自定义过滤器: filter的定义和js中的使用. 在html中使用, filter可以连续使用多个. {...

  • ng-style中使用filter

    **问题原因: ** Angular中使用boostrap的progress在ie8下有问题, 不能显示出进度 错...

  • springboot集成shiro跨域问题

    使用过滤器 注册过滤器 shiro自定义filter中 如果使用Printwriter ServletOutpu...

  • 数组过滤器

    数组过滤器 vue1.0中有一个数组过滤器叫做filterBy,在angular中叫filter,它接收3个参数 ...

  • angular pipe 自定义管道

    可以理解为angular中的管道(pipe)与angular1.x的过滤器(filter)一样。 那么我们就来自定...

  • Spring 向过滤器中注入javaBean

    在使用过滤器的时候,一般我们都是在filter标签中配置 过滤器的 。 但是,当需要在过滤器中注入Bean的时候,...

  • vue过滤器的使用

    过滤器的介绍: 1、在Vue中使用过滤器(Filters)来渲染数据是一种很有趣的方式。2、首先我们要知道,Vue...

网友评论

    本文标题:angular 2在ng-style中使用过滤器filter(自

    本文链接:https://www.haomeiwen.com/subject/ykgijxtx.html