(function() { 'use strict'; var app = angular.module('app', []); app.factory('app.svc.auth', [svcAuth]); app.controller('app.ctrl.grid', ['app.svc.auth','$scope', ctrlGrid]); function svcAuth() { //simple claims container for demo purposes var claims = { 'Name': 'Ozkary', 'Title': 'Tech', 'app.delete': true, 'app.edit': true, 'app.create': true }; function hasClaim(key) { return claims[key];//todo handle multiple claims } return { claims: claims, hasClaim:hasClaim }; } function ctrlGrid($svcAuth, $scope) { var ctrl = this; ctrl.claims = $svcAuth.claims; ctrl.edit = function(key) { if (ctrl.selected === key) { ctrl.selected = null; } else { ctrl.selected = key; } } ctrl.remove = function(key){ delete ctrl.claims[key]; } /* * creates the mapping between controller variables to claim tag. */ ctrl.claimMapping = function () { ctrl.editAccess = false; ctrl.deleteAccess = false; var mapping = {}; mapping['editAccess'] = 'app.edit'; mapping['deleteAccess'] = 'app.delete'; //add other var/tag map return mapping; } /* * sets the controller variables to true/false */ ctrl.claimResults = function (claims) { ctrl.editAccess = claims['editAccess'];//set to true/false ctrl.deleteAccess = claims['deleteAccess']; } /* * initialize the claim validation to set the controller variable state */ function initClaims() { var claims = ctrl.claimMapping(); if (claims && typeof (claims) === 'object') { for (var item in claims) { var claim = claims[item]; var result = $svcAuth.hasClaim(claim); //checks app.edit claims[item] = result; //assigns claims.editAccess = true/false } ctrl.claimResults(claims); //returns each claim status } } $scope.$watch(initClaims); } })();
<div ng-app="app"> <div class="body-content panel-body"> <div class="container-fluid"> <div class="row"> <div class="col-lg-12"> <h4 class="page-header">Controller Claims Authorization - ozkary.com</h4> </div> <!-- /.col-lg-12 --> </div> <div class="row" ng-controller="app.ctrl.grid as ctrl"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading"> My Claims </div> <!-- /.panel-heading --> <div class="panel-body text-center" > <ul class="list-group text-left"> <li ng-repeat="(key,value) in ctrl.claims" class="list-group-item"> <label style="width:150px;">{{key}}</label> <input type="text" class="form-control-static form-input" maxlength="25" ng-disabled="key !== ctrl.selected" ng-model="ctrl.claims[key]" /> <span class="pull-right"> <a ng-show="ctrl.deleteAccess" class="cursor-pointer" title="remove claim" ng-click="ctrl.remove(key)"><i class="fa fa-trash text-danger fa-2x"></i></a> <a ng-show="ctrl.editAccess" class="cursor-pointer" title="edit claim" ng-click="ctrl.edit(key)"><i class="fa fa-edit fa-2x"></i></a> </span> </li> </ul> </div> <!-- /.panel-body --> </div> <!-- /.panel --> </div> <!-- /.col-lg-12 --> </div> </div> </div> </div> <br/>