angularjs通过过滤器返回超链接的方法


Posted in Javascript onOctober 26, 2018

在项目中有一个功能,需要把一段字符串拼接成一个超链接,效果如下图,

angularjs通过过滤器返回超链接的方法

从数据库中得到的字符串格式如下

angularjs通过过滤器返回超链接的方法

数据的格式很工整,以“#”和空格为标志就可以很顺利的分割,

angularjs通过过滤器返回超链接的方法

开始想象的很美好,以为直接返回就好了。

但是现实很残酷,a标签并没有变成超链接,而是变成了一个字符串

angularjs通过过滤器返回超链接的方法

检查发现并没有被转义,对这个感到不太理解

angularjs通过过滤器返回超链接的方法

之后又在网上找了找,没找到合适的办法,后来询问学长,学长高数我有一个ngBindHtml的标签,于是去看了看官方文档,用法和效果如下

angularjs通过过滤器返回超链接的方法

angularjs通过过滤器返回超链接的方法

(第三个文件夹的作用没尝试出来,不知道是干啥的)

好像效果很符合,但应该怎么使用呢,filter里面是没法用$scope的,(事后想到不一定要用filter,完全可以写一个方法直接把这个字符串转化了,虽然这样很麻烦,但确实是一个思路)

没想到好办法,只能继续问学长了,没想到方法简单到不行,angualrjs早就考虑到了,ngbindhtml可以直接使用过滤器

angularjs通过过滤器返回超链接的方法

简简单单就解决了

angularjs通过过滤器返回超链接的方法

总结

对于这个问题,事后想了想,发现还是自己考虑问题不全面,在学长告诉自己ngbindhtml后,一直纠结于他的用法,而没有想到去研究研究过滤器可以用于那些地方,是否可以在属性中。虽然已经渐渐尝试去看官方文档了,但离真正会看官方文档的道路还很长。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 数组操作大全个人总结
Nov 13 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
js使用formData实现批量上传
Mar 27 #Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 #Javascript
js自定义input文件上传样式
Oct 26 #Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 #Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 #Javascript
webpack4+react多页面架构的实现
Oct 25 #Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 #Javascript
You might like
PHP的面试题集
2006/11/19 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
PHP处理会话函数大总结
2015/08/05 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
Python运算符重载用法实例分析
2015/06/01 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Pycharm Git 设置方法
2020/09/15 Python
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
如何理解委托
2012/01/06 面试题
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
文明村镇申报材料
2014/05/06 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
辞职信格式范文
2015/05/13 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
地心历险记观后感
2015/06/15 职场文书
签字仪式主持词
2015/07/03 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle