Binding Table with JSON String using Angular

Anonymous User 1910 28 Feb 2016

We want to Binding Table with JSON String using Angular js how to do this. please help me.

Anonymous User

Other

I am a content writter !

1 Answers

Anonymous User 28 Feb 2016 Accepted Answer

@{
    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>

forum

Binding Table with JSON String using Angular

Can you answer this question?

1 Answers