AngularJS 数据嵌套循环
html代码：
<body ng-app="myApp" ng-controller="ngcopyCtrl">
<table class="table table-bordered" border="1">
<tr class="head-title">
<th class="col-xs-3"></th>
<th class="col-xs-3 text-center">P2P</th>
<th class="col-xs-3 text-center">余额宝</th>
<th class="col-xs-3 text-center">银行理财产品</th>
</tr>
<tr ng-repeat="info in infoList" ng-cloak>
<td class="text-right title-desc" ng-bind="info.title"></td>
<td class="text-center" ng-repeat="key in ['p2p', 'yeb', 'bank']">
<span ng-if="info[key]">
<span ng-if="info[key].length" ng-bind="info[key]"
ng-class="{true: 'year-interest', false: 'etc-text'}[$parent.$parent.$parent.$first]"></span>
<span ng-if="!info[key].length">√</span>
</span>
<span ng-if="!info[key]">×</span>
</td>
</tr>
</table>
</body>
JavaScript代码：
<script>
var myApp = angular.module('myApp', []);
myApp.controller('ngcopyCtrl',['$scope', function($scope) {
$scope.infoList = [
{
title: '预期年化收益率',
p2p: '7% - 14%',
bank: '约 4% - 5.5%',
yeb: '约 3% - 4%'
},
{
title: '买入当天生息',
p2p: true,
bank: false,
yeb: false
},
{
title: '买入次日开始付息',
p2p: true,
bank: false,
yeb: false
},
{
title: '每日付息',
p2p: true,
bank: false,
yeb: true
},
{
title: '每日利息自动复投',
p2p: true,
bank: false,
yeb: '同货币基金'
},
{
title: '期限灵活，随时可取',
p2p: true,
bank: false,
yeb: true
},
{
title: '可以零钱增投',
p2p: true,
bank: false,
yeb: true
}
];
}]);
</script>
1230博客
热门推荐：