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 相关文章推荐
加速IE的Javascript document输出的方法
Dec 02 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
vue router动态路由设置参数可选问题
Aug 21 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
vue实现购物车的监听
Apr 20 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
php截取视频指定帧为图片
2016/05/16 PHP
PHP Cookie学习笔记
2016/08/23 PHP
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
Python三元运算实现方法
2015/01/12 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
python 标准差计算的实现(std)
2019/07/29 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
学期研究性学习个人的自我评价
2014/01/09 职场文书
创新比赛获奖感言
2014/02/13 职场文书
毕业留言寄语大全
2014/04/10 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
运动会报道稿300字
2014/10/02 职场文书