CODEWITHSUNDEEP
angularjs
Reshad
Reshad

Reputation: 2652

Only load html parts when the user has a specific role in angularjs

Currently all my users are built in my app something like this:

{
 id: 1,
 name: 'John Doe',
 roles: [{name: 'owner'}, {name: 'admin'}, {name: 'client'}]
}

I have a Dashboard in my application that should only show parts of the application to users who have a specific role. Lets say only a owner should be able to create or delete something. Can I do something like this in the html to let only admin and owner be able to see that piece of html? so I give the current users roles and tell what roles he should have for the button. 

<button
   class="btn btn-danger"
   permission="vm.user.roles | {'admin', 'owner'}"
   Delete
</button>

Upvotes: 0

Views: 342

Answers (2)

lenny
lenny

Reputation: 3128

ng-if will remove the element from DOM if the condition is false. 

<button class="btn btn-danger" ng-if="vm.hasRole('admin') || vm.hasRole('owner')">
   Delete
</button>

If you want to just hide the element rather than remove it, you can use ng-show instead.

In your controller: 

$scope.hasRole = function(roleName) {
    return user.roles.filter(function(role) {
        return role.name === roleName;
    }).length > 0;
}

Upvotes: 1

Curiousdev
Curiousdev

Reputation: 5778

Use the function indexOf in array to find whether a element is part of the array. It will return the position of the element if found or will return -1.

So you can use an expression like below

<button
   class="btn btn-danger"
   ng-show = "['admin', 'owner'].indexOf(roles)!=-1">
   Delete
</button>

Upvotes: 0

Related Questions