BINDING TABLE WITH JSON STRING USING ANGULAR

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 586  View(s)
Ratings:
Rate this:
We want to Binding Table with JSON String using Angular js how to do this. please help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: Binding Table with JSON String using Angular

    @{

    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

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!