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中关于break,continue的特殊用法与介绍
May 24 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
node.js如何操作MySQL数据库
Oct 29 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
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
读jQuery之三(构建选择器)
2011/06/11 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
Python urlopen 使用小示例
2008/09/06 Python
python查看列的唯一值方法
2018/07/17 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
python join方法使用详解
2019/07/30 Python
python读取Excel表格文件的方法
2019/09/02 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Django实现网页分页功能
2019/10/31 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
四种会话跟踪技术
2015/05/20 面试题
四下基层实施方案
2014/03/28 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
工作态度检讨书范文
2015/05/06 职场文书
毕业班工作总结
2015/08/10 职场文书
护理工作心得体会
2016/01/22 职场文书
介绍一下28个JS常用数组方法
2022/05/06 Javascript