Home > DeveloperSection > Forums > Binding Table with JSON String using Angular
Ankit Singh

Total Post:341

Points:2389
Posted on    February-28-2016 10:04 PM

 Angular JS Angular JS 
Ratings:


 1 Reply(s)
 271  View(s)
Rate this:
We want to Binding Table with JSON String using Angular js how to do this. please help me.


aditya kumar Patel

Total Post:242

Points:1722
Supported
Posted on    February-28-2016 10:08 PM

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Forum</title>

<meta name="viewport" content="width=device-width" />

<script src="~/Scripts/jquery-1.9.1.js"></script>

<script src="~/Scripts/angular.js"></script>

<script>

var data1 = {

"data": [{

"Name": "Laogo Mathew",

"City": "Hawaii",

"Country": "USA"

},

{

"Name": "kavitrai johe",

"City": "Hawaii",

"Country": "USA"

},

{

"Name": "menures Raj",

"City": "Hawaii",

"Country": "USA"

},

{

"Name": "janic apil",

"City": "Hawaii",

"Country": "USA"

},

{

"Name": "beri bos",

"City": "Hawaii",

"Country": "USA"

}]

}

var data2 = {

"data": [

{

"Name": "mensha kalo",

"City": "Hawaii",

"Country": "USA"

},

{

"Name": "secar Thomas",

"City": "Hawaii",

"Country": "USA"

},

{

"Name": "Alok singh",

"City": "Hawaii",

"Country": "USA"

}

]

}

var app = angular.module('myApp', []);

app.controller('employees', function ($scope, $http) {

$scope.names = data1.data;

$scope.next = function () {

$scope.names = data2.data;

}

$scope.prev = function () {

$scope.names = data1.data;

}

});

</script>

<style>

table {

border-collapse: collapse;

width: 100%;

}

th, td {

padding: 0.25rem;

text-align: left;

border: 1px solid #ccc;

}

tbody tr:hover {

background: yellow;

}

</style>

</head>

<body>

<div ng-app="myApp" ng-controller="employees">

<input type="button" value="Prev" ng-click="prev();">

<input type="button" value="Next" ng-click="next();">

<table>

<tr ng-repeat="x in names">

<td>{{ x.Name }}</td>

<td>{{ x.Country }}</td>

</tr>

</table>

</div>

</body>

</html>


Don't want to miss updates? Please click the below button!

Follow MindStick