uxess
Version:
Generic authorization module for role-based handling of ui elements
52 lines (50 loc) • 2.02 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>uXess Sample</title>
<link href="styles.css" rel="stylesheet">
</head>
<body data-ng-app="uXessSample">
<main data-ng-controller="SampleCtrl as sample">
<div class="inner">
<header>
<strong>Roles:</strong>
<label>
<input type="checkbox" name="user" value="user"
data-ng-model="sample.roles.user" data-ng-change="sample.changePermits()">
User
</label>
<label>
<input type="checkbox" name="editor" value="editor"
data-ng-model="sample.roles.editor" data-ng-change="sample.changePermits()">
Editor
</label>
<label>
<input type="checkbox" name="admin" value="admin"
data-ng-model="sample.roles.admin" data-ng-change="sample.changePermits()">
Admin
</label>
</header>
<section>
<p>
Roles don't matter: <button>Button</button>
</p>
<p>
Has any role: <button id="any" data-uxs-if="user, editor, admin" data-uxs-type="any" data-ng-cloak>Button</button>
</p>
<p>
Has all roles: <button id="all" data-uxs-if="user, editor, admin" data-ng-cloak>Button</button>
</p>
<p>
Isn't an admin: <button id="none" data-uxs-if="admin" data-uxs-type="none" data-ng-cloak>Button</button>
</p>
</section>
</div>
</main>
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/angular-animate/angular-animate.min.js"></script>
<script src="../dist/uxess.min.js"></script>
<script src="app.js"></script>
</body>
</html>