Evaluating an expression in AngularJS ng-show directive

Question

Background: As part of a project I'm working on, Users (referred to as "artists" in the case below) can optionally select one or more from a series of Roles: Manager, Producer, Agent, and so forth. Consequently, I need to show or hide certain parts of page depending on which Role(s) the User has selected.

The example: I've tried using the following to conditionally show a div when the User has selected "Manager" as one of his/her Roles (and have it hidden when "Manager" isn't selected), but with no luck. What should I be using in the ng-show directive instead?

<div class="manager_section" ng-show="data.artist.roles.name == 'Manager'">Sample Text Here</div>

Please note: the div appears just fine with no ng-show/ng-hide directive applied, so I'm not looking for a CSS answer or anything; I'm simply looking for the conditional aspect provided by ng-show/ng-hide. And I know the data for the Roles is being pulled to the page, because when I ran the following on the page to test it, the names of each of the Roles the User had selected were accurately displayed:

<div ng-repeat="role in data.artist.roles">{{ role.name }}</div>

No it's separate, sorry for any confusion. Actually, the ng-repeat won't be on the page at all, I was just using it temporarily to make sure that the Roles data was reaching the page at all, which it is. — Andrew, Oct 20 '14 at 21:12
Well, if `roles` is an array - you cant use a condition on it like that - how will it know which index to check? — tymeJV, Oct 20 '14 at 21:13
If `data.artist.roles` is an array, then you need to reference the element in the array that has the `name` property you're comparing against, i.e. `data.artist.roles[0].name === 'Manager'`. — Brett, Oct 20 '14 at 21:14

score 1 · Accepted Answer · answered Oct 20 '14 at 21:19

You can use controller method if you need to run arbitrary JavaScript code.

For example:

<div class="manager_section" ng-show="isAuthorized('Manager')">Sample Text Here</div>

angular.module('myApp', [])
                 .controller('AppCtrl',function(){
                    $scope.isAuthorized = function(role){
                        for(var i=0;i<$scope.data.artist.roles.length;i++){
                           if($scope.data.artist.roles[i].name === role) return true;
                        }
                        return false;
                    }
                 };

Evaluating an expression in AngularJS ng-show directive

1 Answers1