forum

home / developersection / forums / binding table with json string using angular

Ask Question

Binding Table with JSON String using Angular

Anonymous User 1820 28-Feb-2016
We want to Binding Table with JSON String using Angular js how to do this. please help me.
angular js angular js 
Updated on 28-Feb-2016
Anonymous User

Other

I am a content writter !

Follow Message
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

28-Feb-2016 
@{


    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>

Binding Table with JSON String using Angular

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy