Angularjs版本: 1.3.5

工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的,格式是{{ expression | filter }}.我想要的效果是,如果href为空的话,就输出javascript:;.

自定义的Filter是:

var app = angular.module("app", []);
app.controller('HomeCtrl', function($scope) {
$scope.menus = [
{
href:"",
title:"test1"
},
{
href:"http://www.domain.com",
title:"goto"
}
];
});
app.filter("menuhref", function() {
return function(href){
if(href == "" || href == undefined){
return "javascript:;";
}else{
return href;
}
};
});

使用示例:

<ion-list>
<ion-item ng-repeat="menu in menus">
<a href="{{ menu.href | menuhref}}">{{menu.title}}</a>
</ion-item>
</ion-list>

显示的效果是:

链接中出现了unsafe:javascript:;的字样,意思是不安全的链接,原来可以添加链接白名单,如我的code中,链接是http:javascript:的开头的,就可以在app.config进行定义链接白名单,如:

 .config(function($stateProvider, $urlRouterProvider,$compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(javascript|http):/);
});

语法是:aHrefSanitizationWhitelist([regexp]);

最终的显示效果是:

总结:

学习到了Angularjs中可以使用Filter来格式化输出的信息,链接出现unsafe字样时,可以通过$compileProvider.aHrefSanitizationWhitelist()方法设置链接白名单。

参考文献:

  1. Building Custom AngularJS Filters 学习到如何定义自定义Filter
  2. Angular changes urls to “unsafe:” in extension page 解决Angularjs的链接显示unsafe
  3. $compileProvider $compileProvider文档

Angularjs 1 使用filter格式化输出href的更多相关文章

  1. Angularjs 使用filter格式化输出href

    工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的,格式是{{ expression | ...

  2. AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

    1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...

  3. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  4. 详解AngularJS中的filter过滤器用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...

  5. AngularJS的过滤器$filter

    过滤器(filter)主要用于数据的格式上,通过某个规则,把值处理后返回结果.例如获得数据集,可排序后再返回. ng内置的共有九种过滤器: currency 货币 使用currency可以将数字格式化 ...

  6. 小白学python-day05-IDE、格式化输出、For While循环、断点、continue、break

    今天是day05,以下是学习总结. 但行努力,莫问前程. ----------------------------------------------------------------------- ...

  7. python基础_格式化输出(%用法和format用法)(转载)

    python基础_格式化输出(%用法和format用法) 目录 %用法 format用法 %用法 1.整数的输出 %o -- oct 八进制%d -- dec 十进制%x -- hex 十六进制 &g ...

  8. python的print函数的格式化输出

    使用print函数的时候,可以像C一样格式化输出,同时还支持参数化输出 print('%s' % ("CooMark")) print('整数|%d|' % (123)) prin ...

  9. python学习笔记(基础二:注释、用户输入、格式化输出)

    注释 单行:# 多行:上下各用3个连续单引号或双引号 3个引号除了多行注释,还可以打印多行 举例: msg = ''' name = "Alex Li" name2 = name ...

随机推荐

  1. Xshell 排版错乱问题

  2. Windows color

    设置默认的控制台前景和背景颜色. COLOR [attr] attr        指定控制台输出的颜色属性. 颜色属性由两个十六进制数字指定 -- 第一个对应于背景,第二个对应于前景.每个数字可以为 ...

  3. 线段树离散化+区间更新——cf1179C好题

    绝对是很好的题 把问题转化成当第i个询问的答案是数值x时是否可行 要判断值x是否可行,只要再将问题转化成a数组里>=x的值数量是否严格大于b数组里的>=x的值 那么线段树叶子结点维护对于值 ...

  4. Arcmap中处理面图层中空白碎片

    在面数据中,有时候在一个面要素中会出现碎片,而我们大多时候不希望这些碎片存在(图1),下面介绍通过Editor工具把这些碎片处理掉.

  5. sql stuff拼接字符串的用法

    要把图2显示成图1的方法:要用到stuff函数,并且图1显示的时间有所截断. 图2sql,只是很普通的sql ), SKSJ, )=' order by SKSJ 图1sql,用了stuff拼接 ), ...

  6. day 51 阿里iconfont的使用

    阿里iconfont的使用   1. 找到阿里巴巴图标库 2.找到图标 3.搜索你想要的图标 4.将图标添加到购物车 5.点击右上角的购物车按钮,我这里添加了两个. 6.提示你登陆,不需要花钱,找其中 ...

  7. 第三方模块requests下载

    requests下载 英文网站 http://docs.python-requests.org/en/master/ 中文网站 http://docs.python-requests.org/zh_C ...

  8. [AHOI2014/JSOI2014]骑士游戏

    题目 思博贪心题写了一个半小时没救了,我也没看出这是一个\(spfa\)来啊 设\(dp_i\)表示彻底干掉第\(i\)只怪物的最小花费,一个非常显然的事情,就是对于\(k_i\)值最小的怪物满足\( ...

  9. Resource Archiver HDU - 3247 AC自动机+BFS+状压

    题意: 给出n个资源串,m个病毒串,现在要如何连接资源串使得不含病毒串(可以重叠,样例就是重叠的). 题解: 这题的套路和之前的很不同了,之前的AC自动机+DP的题目一般都是通过teir图去转移, 这 ...

  10. 收藏的链接-Qt

    Qt编写的开源帖子集合(懒人专用) - QTCN开发网 - Powered by phpwind http://www.qtcn.org/bbs/read-htm-tid-85501.html?tds ...