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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
JS继承最简单的理解方式
Mar 31 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
Zend Guard使用指南及问题处理
2015/01/07 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
Python根据服务获取端口号的方法
2019/09/25 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
python实现简单猜单词游戏
2020/12/24 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
JVM是一个编译程序还是解释程序
2012/09/11 面试题
幼儿园教师请假制度
2014/01/16 职场文书
运动会演讲稿200字
2014/08/25 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
python中取整数的几种方法
2021/11/07 Python
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫
MySQL主从切换的超详细步骤
2022/06/28 MySQL