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 相关文章推荐
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
js select option对象小结
Dec 20 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
Laravel学习教程之路由模块
2017/08/18 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
javascript的this关键字详解
2019/05/20 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
python命令行参数用法实例分析
2019/06/25 Python
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
酒店管理自荐信
2013/10/23 职场文书
房屋出租协议书
2014/04/10 职场文书
基层党员对照检查材料
2014/08/25 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
硕士论文致谢范文
2015/05/14 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
怎样写好工作计划
2019/04/10 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
Python关于OS文件目录处理的实例分享
2021/05/23 Python
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫