[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 ...
随机推荐
- isEqual
"; NSString *str2 = [NSString stringWithFormat:@"%@", str1]; 大家明白, str1和str2在内存中的地址是不 ...
- AppStore IPv6-only审核被拒原因分析及解决方案-b
自2016年6月1日起,苹果要求所有提交App Store的iOS应用必须支持IPv6-only环境,背景也是众所周知的,IPv4地址已基本分配完毕,同时IPv6比IPv4也更加高效,向IPv6过渡是 ...
- LightOj_1364 Expected Cards
题目链接 题意: 一副牌, 每个花色13张牌,加上大小王,共54张. 遇到大小王可以代替其中某种花色. 给定C, D, H, S. 每次抽一张牌, 问抽到C张梅花, D张方块, H张红桃, S张黑桃所 ...
- 【BZOJ 3529】 [Sdoi2014]数表 (莫比乌斯+分块+离线+树状数组)
3529: [Sdoi2014]数表 Description 有一张N×m的数表,其第i行第j列(1 < =i < =礼,1 < =j < =m)的数值为能同时整除i和j的所有 ...
- 【BZOJ3439】 Kpm的MC密码 (TRIE+主席树)
3439: Kpm的MC密码 Description 背景 想Kpm当年为了防止别人随便进入他的MC,给他的PC设了各种奇怪的密码和验证问题(不要问我他是怎么设的...),于是乎,他现在理所当然地忘记 ...
- http://rogerdudler.github.io/git-guide/index.zh.html
http://rogerdudler.github.io/git-guide/index.zh.html
- VC模拟发送数据包-百度关键词查找
VC模拟发送数据包-百度关键词查找 逗比汪星人2009-09-06上传 VC模拟发送数据包-百度关键词abcdef查找 详情 http://blog.csdn.net/wangningyu htt ...
- 在android4.0中实现View的拖动效果
实现方法: 首先需要定义一个支持拖动的源组件和一个作为Drop区域的目标组件. 在支持拖动的组件中注册OnTouchListener 或LongClickListener监听事件,构建一个ClipDa ...
- DIV 清除样式浮动万能代码
.talk { width: 100%; margin: 10px 0; } .talk:after { ...
- 9.png(9位图)在android中作为background使用导致居中属性不起作用的解决方法
在使用到9.png的布局上面添加 android:padding="0dip" 比如 <LinearLayout android:layout_widt ...