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 相关文章推荐
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
javascript实现密码验证
2015/11/10 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
layui实现数据分页功能
2019/07/27 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
vue实现分页加载效果
2019/12/24 Javascript
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
使用pip安装python库的多种方式
2019/07/31 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
pycharm安装及如何导入numpy
2020/04/03 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
自我鉴定注意事项
2014/01/19 职场文书
团日活动总结模板
2014/06/25 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js
python 离散点图画法的实现
2022/04/01 Python