如何让 if else 在 ng-repeat 中与 ng-switch 一起工作?
How to have if else work in ng-repeat with ng-switch?
http://plnkr.co/edit/GQ40yelDbLMpRyZqYpNB?p=preview
或任何其他 ng
在我上面的示例中,我有一个包含一些比特币交易的模型,一些是传入的,一些是传出的,两者都有不同的图标。
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
的文档
Usage
<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>
你知道我错在哪里了吗?还是我需要使用另一个 ng
?
改变
<td class="td_icon" ng-switch="{{trans.type}}">
到
<td class="td_icon" ng-switch="trans.type">
术语 expression
在 angular 文档中有时会令人困惑
您想删除此行的大括号(angular 将为您计算 ng-switch
的值):
<!-- before -->
<td class="td_icon" ng-switch="{{trans.type}}">
<!-- after -->
<td class="td_icon" ng-switch="trans.type">
http://plnkr.co/edit/GQ40yelDbLMpRyZqYpNB?p=preview
或任何其他 ng
在我上面的示例中,我有一个包含一些比特币交易的模型,一些是传入的,一些是传出的,两者都有不同的图标。
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
的文档Usage
<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>
你知道我错在哪里了吗?还是我需要使用另一个 ng
?
改变
<td class="td_icon" ng-switch="{{trans.type}}">
到
<td class="td_icon" ng-switch="trans.type">
术语 expression
在 angular 文档中有时会令人困惑
您想删除此行的大括号(angular 将为您计算 ng-switch
的值):
<!-- before -->
<td class="td_icon" ng-switch="{{trans.type}}">
<!-- after -->
<td class="td_icon" ng-switch="trans.type">