[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 ...
随机推荐
- ySQL for mac使用记录
一.登录 打开终端,输入/usr/local/mysql/bin/mysql -u root -p 初次进入mysql,密码为空.当出现mysql>提示符时,表示你已经进入mysql中.键入ex ...
- C# RichTextBox 获取当前显示部分的文字
int start = richTextBox1.GetCharIndexFromPosition(new Point(0, 0)); int end = richTextBox1.GetCharIn ...
- 小Z的创业经历 谢谢支持
写这篇文章的目的是跟大家分享下创业的一些想法,经历.希望对你有所帮助或有所思考. 我想用6篇文章介绍下前期创业经历 1.怎么创业了? 2.万事开头难,怎么开始呢? 3.我们的系统详情(上) 4.我们 ...
- jQuery获取屏幕的宽度
Javascript: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...
- Hdu 2979 Expensive Drink
Description There are some water, milk and wine in your kitchen. Your naughty little sister made som ...
- vs2015 Xamarin.Android安装
原文:vs2015 Xamarin.Android安装 Xamarin.Android 安装步骤,以vs2015为例 1,安装vs2015中的跨平台项,但是安装在国内肯定失败,因为需要到谷歌下载 当我 ...
- 【HDOJ】4553 约会安排
线段树.线段树的细节很重要,小数据遍历可以发现问题. /* 4553 */ #include <iostream> #include <string> #include < ...
- 查看本机上的端口使用情况netstat -an
1.查找本机上的端口使用情况 netstat -an 2.查找指定端口的使用情况 C:\Windows\System32>netstat -ano | find "8002" ...
- check约束条件
--约束:对列的值起一个约束性的作用,规定列的值的范围 --主键.外键.非空.自增长标识列.唯一列(unique).check约束 --check 约束 --在某个表里点击右键→设计→进去找到要约束的 ...
- java线程(2)-线程间通信
方法一 通过访问共享变量的方式(注:需要处理同步问题) 方法二 通过管道流 其中方法一有两种实现方法,即 方法一a)通过内部类实现线程的共享变量 public class Innersharethr ...