ng-switch is not matching with the expected option

Question

I'm having problems with angularjs ng-switch

JS

function TestCtrl($scope) {
    $scope.currentUser = {"userId":"1","userRole":"N"};
    $scope.userRoles = {"normal":"N","admin":"A"}
    $scope.patient = {name: 'John'};
}

HTML

    <div ng-switch on="currentUser.userRole">
      <a ng-switch-when="userRoles.normal" href="normalUrl"> 
          {{patient.name}} 
      </a>
      <a ng-switch-when="userRoles.admin" href="adminUrl"> 
          {{patient.name}} 
      </a>
      <div ng-switch-default> default </div>
    </div> 

</div>

I expect the name of the patient to be displayed with a link to normalUrl but 'default' is displayed. What am I doing wrong?

Here is a fiddle with the code

Answer 1

The ngSwitchWhen directive does not evaluate expressions (although I've heard this might be added to 1.3). The value is interpolated as a string literal, so you would have to use it like this:

<a ng-switch-when="N" href="normalUrl">

That will work, but if you really need to dynamically determine your when value, then maybe ngIf will better suit your needs:

<a ng-if="currentUser.userRole === userRoles.normal" href="normalUrl">

<a ng-if="currentUser.userRole === userRoles.admin" href="adminUrl">