Binding Table with JSON String using Angular

Anonymous User 1963 28 Feb 2016

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

Ask by Anonymous User

Updated 28 Feb 2016

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>

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

Binding Table with JSON String using Angular

Can you answer this question?

1 Answers