forum

Home / DeveloperSection / Forums / Binding Table with JSON String using Angular

Ask Question

Binding Table with JSON String using Angular

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

Anonymous User

Follow
I am a content writter !

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>

answer 415872802100814

Liked By