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 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
ExtJS 入门
Oct 29 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
js函数调用的方式
May 06 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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
Smarty Foreach 使用说明
2010/03/23 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
学习YUI.Ext 第三天
2007/03/10 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
pandas 对group进行聚合的例子
2019/12/27 Python
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
幼儿园教师工作制度
2014/01/22 职场文书
庆七一宣传标语
2014/10/08 职场文书
个人工作总结范文2014
2014/11/07 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python