javascript - Showing and hiding menu items efficiently -

javascript - Showing and hiding menu items efficiently -

right have navigation menu. however, depending on job title can see menu items.

the html have looks following

<ul> <li ng-repeat="item in navigationitems | orderby:'-id'"> <a href="#/{{item.name}}">{{item.name}}</a> </li> </ul>

and controller follows...

$scope.navigationitems = [ { name: "item 1", id: 1 }, { name: "item 2", id: 2 }, { name: "item 3", id: 3 }, { name: "item 4", id: 4 }, ]

this has been simplified. in reality there 15 menu items.

there 5 different job titles, , each job title, can see menu items. how can avoid doing check each title followed menu items can see...for illustration not want do....

if(jobtitle=="manager") { $scope.navigationitems = [item 1, item 2, item 12, item 7....] } else if(jobtitle =="staff") { $scope.navigationitems = [item 5, item 9, item 12, item 15....] } else if(jobtitle == "whatever") { $scope.navigationitems = [item 12, item 14, item 15....] }

and on. there better, more optimal way go doing in angular instead of having retype of menu items each case?

what best approach depends on criteria , other requirements, 1 possible (and perchance "good") approach extend each navigation item array of "allowed" job-titles (roles) , create (and use) custom filter filters navigation items job-title (role).

important note: others have mentioned, of import understand ui , presentation purposes , no security provided hiding away view elements. role-based restrictions should enforced on server-side.

<ul> <li ng-repeat="item in navigationitems | filterbyrole:jobtitle | orderby:-'id'"> <a href="#/{{item.name}}">{{item.name}}</a> </li> </ul> $scope.navigationitems = [{ name: "item 1", id: 1, roles: [...] }, { name: "item 2", id: 2, roles: [...] }, { ... app.filter('filterbyrole', function () { homecoming function (items, role) { homecoming items.filter(function (item) { homecoming item.roles.indexof(role) !== -1; }); }; });

see, also, short demo.

javascript angularjs