CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatng-switch
Leon Gaban
Leon Gaban

Reputation: 39018

How to have if else work in ng-repeat with ng-switch?

http://plnkr.co/edit/GQ40yelDbLMpRyZqYpNB?p=preview

Or any other ng

In my example above I have a model containing some Bitcoin transactions, some are incoming and some outgoing, both of which have a different icon.

vm.transactions = [
  {
    type: 'incoming',
    comment: 'Recieved from multiple addresses',
    time: '10 hours ago',
    amount: 0.00498623
  },
  {
    type: 'incoming',
    comment: 'Recieve from 1MgZLyz6d8djEqe68XoPpsjx9BFQyVAtXN',
    time: '12 hours ago',
    amount: 0.003
  },
  {
    type: 'outgoing',
    comment: 'Sent to 17dPAMzZiosQYVty6ES4KSWN8R8XFcxShH',
    time: 'Jan 15th 2015',
    amount: 0.01
  },
  {
    type: 'incoming',
    comment: 'Recieved from multiple addresses',
    time: 'Jan 14th 2015',
    amount: 0.02874
  },
  {
    type: 'outgoing',
    comment: 'Sent to 1GS9E86Y3mhK7Qwm1vqvgCmpE5u6MMxPML',
    time: 'Jan 12th 2015',
    amount: 0.064904
  }
];

I found these docs about ng-switch

Usage

<ANY ng-switch="expression">
  <ANY ng-switch-when="matchValue1">...</ANY>
  <ANY ng-switch-when="matchValue2">...</ANY>
  <ANY ng-switch-default>...</ANY>
</ANY>

So this is what I'm trying at the moment, but the icons are not showing up:

<tr class="row_body"
    ng-repeat="trans in transactions">

    <td class="td_icon" ng-switch="{{trans.type}}">
        <div ng-switch-when="incoming" class="icon-download">↓</div>
        <div ng-switch-when="outgoing" class="icon-upload">↑</div>
    </td>
    <td class="td_comment">
        {{ trans.comment }}
        <p class="date">{{ trans.time }}</p>
    </td>
    <td class="td_amount green">{{ trans.amount }}</td>
</tr>

enter image description here

Do you see where I'm going wrong? Or is there another ng I need to be using?

Upvotes: 2

Views: 177

Answers (2)

bcherny
bcherny

Reputation: 3172

You want to remove the curly brackets on this line (angular will evaluate the value of an ng-switch for you):

<!-- before -->
<td class="td_icon" ng-switch="{{trans.type}}">

<!-- after -->
<td class="td_icon" ng-switch="trans.type">

Upvotes: 3

charlietfl
charlietfl

Reputation: 171679

Change 

<td class="td_icon" ng-switch="{{trans.type}}">

To

<td class="td_icon" ng-switch="trans.type">

The term expression can sometimes be confusing in angular docs

Working Plunker

Upvotes: 5

Related Questions