2015-01-22 2 views
2

http://plnkr.co/edit/GQ40yelDbLMpRyZqYpNB?p=previewКак иметь, если что-то еще работает в ng-repeat с ng-switch?

Или любой другой нг

В моем примере выше у меня есть модели, содержащей некоторые сделки Bitcoin, некоторые входящие и исходящие некоторые, оба из которых имеют другой значок.

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 
    } 
]; 

Я нашел эти документы о ng-switch

Использование

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

Так это то, что я пытаюсь в настоящее время, но иконки не отображаются:

<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

Вы видите, где я ошибаюсь? Или есть еще ng Мне нужно использовать?

ответ

5

Изменить

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

Для

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

Термин expression иногда может привести к путанице в угловых Docs

Working Plunker

+0

woot! : D kk ... теперь время, чтобы посмотреть, смогу ли я получить эту работу над классами –

3

Вы хотите удалить фигурные скобки на этой линии (угловая будет оценивать va lue of ng-switch):

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

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