Apply additional filter only to one element of ng-repeat

Issue

I am working on an existing AngularJS project. I have an object with key, values which displayed on the page. All keys should be with a capitalized first letter, so I apply a filter. But if the key == 'sku' then I need to make all letters to be capital.

Could you advise how can I do that?

Thank you

HTML

<tr
 class="product-characteristics"
 ng-repeat="(prop, val) in $ctrl.product.additional_properties"
>
 <td class="name">
   {{prop | capitalize}}
 </td>
 <td>
   <a ng-click="$ctrl.propertyClicked(prop, val)">{{val| titleCase}}</a>
 </td>
</tr>

Solution

The easiest way would be to create separate condition for this case.

<td class="name" ng-if="prop === 'sku'">
  {{ prop | uppercase }}
</td>
<td class="name" ng-if="prop !== 'sku'">
  {{ prop | capitalize }}
</td>

But in the future you may want to extend this solution, therefore better soultion (and much more readable) would be to use switch-case option.

<td class="name" ng-switch="prop">
  <span ng-switch-when="sku">{{ prop | uppercase }}</span>
  <span ng-switch-default>{{ prop | capitalize }}</span>
</td>

Answered By - Faustyn Piechowiak