Credit Card List from Json
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<h4>Credit Card List</h4>
<div>{{data[0].CreditCard}}
<table>
<tr>
<td>S.No.</td>
<td>Issuer</td>
<td>Card</td>
</tr>
<tr ng-repeat="card in data">
<td>{{$index+1}}</td>
<td>{{card.CreditCard.IssuingNetwork}}</td>
<td>{{card.CreditCard.CardNumber}}</td>
</tr>
</table>
</div>
CSS
body{
font-family:Arial;
}
.tb {
margin:0px;
padding:0px;
width:80%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #ffffff;
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
border-bottom-right-radius:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
border-top-right-radius:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
}
.tb table {
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.tb tr:last-child td:last-child {
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
border-bottom-right-radius:5px;
}
.tb table tr:first-child td:first-child {
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
}
.tb table tr:first-child td:last-child {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
border-top-right-radius:5px;
}
.tb tr:last-child td:first-child {
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
border-bottom-left-radius:5px;
}
.tb tr:hover td {
background-color:#cccccc;
}
.tb td {
vertical-align:middle;
background-color:#6699cc;
border:1px solid #ffffff;
border-width:0px 1px 1px 0px;
text-align:left;
padding:5px;
font-size:11px;
font-weight:bold;
color:#003f7f;
}
.tb tr:last-child td {
border-width:0px 1px 0px 0px;
}
.tb tr td:last-child {
border-width:0px 0px 1px 0px;
}
.tb tr:last-child td:last-child {
border-width:0px 0px 0px 0px;
}
.tb tr:first-child td {
background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f));
...
JavaScript
function AppCtrl($scope) {
//Assign data
$scope.data = [{
"CreditCard": {
"IssuingNetwork": "MasterCard",
"CardNumber": 5495261441046330
}
}, {
"CreditCard": {
"IssuingNetwork": "MasterCard",
"CardNumber": 5208442941749197
}
}, {
"CreditCard": {
"IssuingNetwork": "MasterCard",
"CardNumber": 5170581361324835
}
}, {
"CreditCard": {
"IssuingNetwork": "MasterCard",
"CardNumber": 5166769642241086
}
}, {
"CreditCard": {
"IssuingNetwork": "MasterCard",
"CardNumber": 5288012800624584
}
}, {
"CreditCard": {
"IssuingNetwork": "MasterCard",
"CardNumber": 5539916827758737
}
}, {
"CreditCard": {
"IssuingNetwork": "MasterCard",
"CardNumber": 5477198343622663
}
}, {
"CreditCard": {
"IssuingNetwork": "MasterCard",
"CardNumber": 5415450117852512
}
}, {
"CreditCard": {
"IssuingNetwork": "MasterCard",
"CardNumber": 5293122903949730
}
}, {
"CreditCard": {
"IssuingNetwork": "MasterCard",
"CardNumber": 5263273219779463
}
}, {
"CreditCard": {
"IssuingNetwork": "MasterCard",
"CardNumber": 5266323370386967
}
}, {
"CreditCard": {
"IssuingNetwork": "MasterCard",
"CardNumber": 5327071039801507
}
}, {
"CreditCard": {
"IssuingNetwork": "MasterCard",
"CardNumber": 5277679297646958
}
}, {
"CreditCard": {
"IssuingNetwork": "MasterCard",
"CardNumber": 5392139025811671
}
}, {
"CreditCard": {
...