[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 ...
随机推荐
- 第 11 章 桥梁模式【Bridge Pattern】
以下内容出自:<<24种设计模式介绍与6大设计原则>> 今天我要说说我自己,梦想中的我自己,我身价过亿,有两个大公司,一个是房地产公司,一个是服装制造业,这两个公司都很赚钱,天 ...
- python 重载 __hash__ __eq__
__author__ = 'root' from urlparse import urlparse class host_news(): def __init__(self, id, url): se ...
- uva 10652 Board Wrapping
主要是凸包的应用: #include <cstdio> #include <cmath> #include <cstring> #include <algor ...
- [python]用profile协助程序性能优化
转自:http://blog.csdn.net/gzlaiyonghao/article/details/1483728 本文最初发表于恋花蝶的博客http://blog.csdn.net/lanph ...
- java httpclient post 文件到server
public void sendFileToServer (String url, File logFiles) { HttpURLConnection connection = nul ...
- 求奇数偶数的和,,利用while循环
static void Main(string[] args) { while (true) { try ...
- 学以致用:让visualstudio爱上sublime
前言: 经常在vs中工作,但是一些编辑工作却非常喜欢sublime的方式,如果你也是,那我们来当媒婆吧,哈哈. 准备: Visualstudio一枚 Sublime一枚 ...
- wifi测试相关(iwconfig,WPA Supplicant用法)
iwconfig用法 1.打开无线网卡电源 iwconfig wlan0 txpower no 2.列出区域内的无线网络 iwconfig wlan0 scan 3.假设要连接到网络myhome(即e ...
- 整理:Google jQuery 引用地址大全和方法(转)
什么是google的js托管? 说的明白点,跟我们以往做法一样,只不过这时候的引用的js库是放在google服务器上的. 比如引用jquery,则使用路径 http://ajax.googleapi ...
- EF-CodeFirst-表关系-延迟/贪婪加载
表关系建立: http://blog.csdn.net/niewq/article/details/17232321 一对多: namespace LckLib.EF.V6.Models { publ ...