how to show/hide div according to user permission/role using angularjs in sharepoint 2010 -

i have create form using content editor web part in sharepoint 2010. have hide item or div based on group permission (example: admin,user) using angularjs.

there have 2 ways solve problem:

1. you receive data , display or not based on current role, helped display function. jsfiddle1

   javascript code:

   var demoapp = angular.module('demoapp', []); demoapp.controller('permissionsform', function ($scope) {      // mock data. must receive server     $scope.mockdata = {         field1: {         value: 'field1 value',         roles: ['admin','user']         },         field2: {             value: 'field2 value',             roles: ['admin']         },             field3: {             value: 'field3 value',             roles: ['admin','user']         },         role: 'user'     };      $scope.displayfield = function(fieldname){         var foundrole = false;         angular.foreach($scope.mockdata[fieldname].roles, function(value, key) {             if (value == $scope.mockdata.role){                     foundrole = true;             }         });         return foundrole;     }; }); 

   html code:

   <div data-ng-app="demoapp" data-ng-controller="permissionsform" class="main">     <form>         <div ng-if="displayfield('field1')">             <label for="field1">field 1</label>             <input id="field1" value="{{mockdata.field1.value}}">         </div>         <div ng-if="displayfield('field2')">             <label for="field2">field 2</label>             <input id="field2"value="{{mockdata.field2.value}}">         </div>         <div ng-if="displayfield('field3')">             <label for="field3">field 3</label>             <input id="field3"  value="{{mockdata.field3.value}}">         </div>     </form> </div> 

2. you receive data related each roles/permission , build interface list of fields. more secure way hide info. jsfiddle2

   javascript code:

   var demoapp = angular.module('demoapp', []); demoapp.controller('permissionsform', function ($scope) {      // mock data. must receive server     $scope.mockdata = {         field1: {             value: 'field1 value'         },         field3: {             value: 'field3 value'         },         field4: {             value: 'field4 value'         }     };       $scope.displayfield = function(fieldname){         if ( $scope.mockdata[fieldname] == undefined )             return false;         return true;     }; }); 

   html code:

   <div data-ng-app="demoapp" data-ng-controller="permissionsform" class="main">     <form>         <div ng-if="displayfield('field1')">             <label for="field1">field 1</label>             <input id="field1" value="{{mockdata.field1.value}}">         </div>         <div ng-if="displayfield('field2')">             <label for="field2">field 2</label>             <input id="field2"value="{{mockdata.field2.value}}">         </div>         <div ng-if="displayfield('field3')">             <label for="field3">field 3</label>             <input id="field3"  value="{{mockdata.field3.value}}">         </div>         <div ng-if="displayfield('field4')">             <label for="field4">field 4</label>             <input id="field4"  value="{{mockdata.field4.value}}">         </div>     </form> </div> 

from secure point of view, second solution best, because not exposing data in client side (browser)