this is the second question being asked from my friend.. he is working on a project that need to generated a table with multiple number of columns based on the Json data.
you can view the first question regarding the AngularJS framework upgrade here
How to solve legacy AngularJS application failed in AngularJS Framework Upgrade
we can put ng-repeat in the TD column attribute to implement this requirement, the following code demonstrate the implementation
html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<%--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>--%>
<script>
angular.module('MyApp', []).controller('MyController1', ['$scope', MyController1]);
function MyController1($scope) {
$scope.mailLinks1 = [
{
"lnks": [
{ "txt": "YahooMail 11", "url": "www.yahoomail.ca" },
{ "txt": "Gmail", "url": "www.gmail.com" },
{ "txt": "Outlook", "url": "www.outlook.com" }
], "indx": "1"
},
{
"lnks": [
{ "txt": "YahooMail 22", "url": "www.yahoomail.ca" },
{ "txt": "Gmail", "url": "www.gmail.com" },
{ "txt": "Outlook", "url": "www.outlook.com" }
], "indx": "2"
},
{
"lnks": [
{ "txt": "YahooMail 33", "url": "www.yahoomail.ca" },
{ "txt": "Gmail", "url": "www.gmail.com" },
{ "txt": "Outlook", "url": "www.outlook.com" }
], "indx": "3"
},
{
"lnks": [
{ "txt": "YahooMail 44", "url": "www.yahoomail.ca" },
{ "txt": "Gmail44", "url": "www.gmail.com" },
{ "txt": "Outlook44", "url": "www.outlook.com" }
], "indx": "3"
},
{
"lnks": [
{ "txt": "xMail ...x", "url": "www.xxxxMail.ca" },
{ "txt": "xxxxmail", "url": "www.xxx.com" },
{ "txt": "xxxxxxxxx", "url": "www.xxx.com" }
], "indx": "x"
}
];
}
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController1" >
<table id="dispPnlTable" border="1" cellspacing="0" cellpadding="5">
<tr>
<td ng-repeat="json1 in mailLinks1" >
<table><tr ng-repeat="lnk1 in json1.lnks"><td>
{{lnk1.txt}} -- {{lnk1.url}}
</td></tr></table>
</td>
</tr>
</table>
</div>
</body>
</html>
No comments:
Post a Comment