[AngularJS] Extract predicate methods into filters for ng-if and ng-show
Leaking logic in controllers is not an option, filters are a way to refactor your code and are compatible with ng-if and ng-show.
<div ng-if="main.currentUser | user:'isAdmin'">
Admin div
</div>
<div ng-if="main.currentUser | user:'isntAdmin'">
Standard user div
</div>
var app = angular.module('App', []); app.controller('MainCtrl', function() {
var currentUser = { rights: [] };
function setAdmin(){
resetAdmin();
currentUser.rights.push('admin');
}
function resetAdmin(){
currentUser.rights = [];
} this.currentUser = currentUser;
this.setAdmin = setAdmin;
this.resetAdmin = resetAdmin;
}); app.filter('user', function(){
var rules = {
isAdmin: function(user){
return user.rights.indexOf('admin') !== -1;
},
isntAdmin: function(user){
return !rules.isAdmin(user);
}
}; return function(user, rule){
return rules[rule](user);
};
});
[AngularJS] Extract predicate methods into filters for ng-if and ng-show的更多相关文章
- [AngularJS] Adding custom methods to angular.module
There are situations where you might want to add additional methods toangular.module. This is easy t ...
- Part 14 ng hide and ng show in AngularJS
ng-hide and ng-show directives are used to control the visibility of the HTML elements. Let us under ...
- Angular6之ng build | ng build --aot | ng build --prod 差异
由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...
- 在库中使用schematics——ng add与ng update
起步 创建一个angular库 ng new demo --create-application=false ng g library my-lib 可见如下目录结构 ├── node_modules ...
- AngularJS + RequireJS
http://www.startersquad.com/blog/AngularJS-requirejs/ While delivering software projects for startup ...
- 使用AngularJS实现简单:全选和取消全选功能
这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...
- [后端人员耍前端系列]AngularJs篇:使用AngularJs打造一个简易权限系统
一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多 ...
- [AngularJS] AngularJS系列(1) 基础篇
目录 什么是AngularJS? 为什么使用/ng特性 Hello World 内置指令 内置过滤器 模块化开发 一年前开始使用AngularJS(以后简称ng),如今ng已经出2了.虽说2已完全变样 ...
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs 前端主体结构(五)
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 6 Angularjs 前端主体结构 6.1 A ...
随机推荐
- WordPress 使用 Pie-Register 添加前台注册、登录、找回密码和编辑个人资料功能
转自:http://www.wpdaxue.com/front-end-publishing.html Pie-Register 是一个功能比较完善的 WordPress 才能,使用它可以很方便添加和 ...
- 【网络流24题】 No.22~24
接下来几题就写写题解吧.不是很想打了. 22. 输入文件示例input.txt4 21 2 7 36 5 8 37 8 10 59 6 13 9 输出文件示例output.txt17 最长不相交路径. ...
- 網站SSL加密原理簡介(2张图,握手有9个步骤,解释的很清楚)
Secure Socket Layer說明 SSL是Secure Socket Layer(安全套接層協議)的縮寫,可以在Internet上提供秘密性傳輸.最早是Netscape公司所提出,SSL的目 ...
- 可恶的QT隐式共享
这个问题隐藏的很深,一般不容易察觉它造成的问题,而只是享受它提供的好处(节省内存,而且速度更快). 但我发现它现在至少造成两个问题: 1. 把大量的QString放到QMap里,使用完毕后清空QMap ...
- Android Density(密度)
1. 什么是density 引用 1) density density表示每英寸有多少个显示点(逻辑值),它的单位是dpi:dot per inch,通常屏幕大时,density就大,屏幕小时,de ...
- 用JAVA 查询 Active Directory(AD)
Required Details LDAP address (For e.g.: myjeeva.com or IP of the Domain Controller/Global Catalog[G ...
- 一台机器上运行多个ActiveMq
由于业务需要一台机器上运行多个ActiveMq,这里主要说一下有什么地方不重复: 1.brokerName名称不能重复 2.端口号不能重复uri = tcp://localhost:50509 3.k ...
- MySQL源码 information_schema新增表
information_schema是MySQL下的DB, 存储了数据库的数据字典,但OS系统上,并没有information_schema下表的数据和结构文件. 所以,MySQL在针对informa ...
- Apache Struts 跨站脚本漏洞
漏洞名称: Apache Struts 跨站脚本漏洞 CNNVD编号: CNNVD-201311-010 发布时间: 2013-11-04 更新时间: 2013-11-04 危害等级: 漏洞类型 ...
- 在网页中插入CSS样式表的几种方法
1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head> ...