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 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
JS实现瀑布流效果
Mar 07 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
js获取Get值的方法
2016/09/29 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
iview同时验证多个表单问题总结
2018/09/29 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
MIS软件工程师的面试题
2016/04/22 面试题
税务会计岗位职责
2014/02/18 职场文书
《颐和园》教学反思
2014/02/26 职场文书
心理健康日活动总结
2014/05/08 职场文书
离婚协议书怎么写
2015/01/26 职场文书
2015年党建工作总结
2015/03/30 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle
python元组打包和解包过程详解
2021/08/02 Python
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS