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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
img的onload的另类用法
Jan 10 Javascript
jquery 使用简明教程
Mar 05 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
Vue表单实例代码
2016/09/05 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
学校元旦晚会方案
2014/02/19 职场文书
党风廉设责任书
2014/04/16 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
2015年春节标语口号
2014/12/09 职场文书
助学感谢信范文
2015/01/21 职场文书
李强为自己工作观后感
2015/06/11 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
工作自我评价范文
2019/03/21 职场文书
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android