Bind Json WebService to HTML table using AngularJS in ASP.Net

vipul009
 
on Apr 21, 2017 03:43 AM
3263 Views

asp code:-

<body ng-app="myApp">
    <div ng-controller="myCntrl">
        <table class="table table-bordered table-condensed">
            <thead>
                <tr class="text-info">
                    <th>
                        Name
                    </th>
                    <th>
                        Type
                    </th>
                    <th>
                        Size
                    </th>
                    <th>
                        Source
                    </th>
                    <th>
                        Version
                    </th>
                    <th>
                        Category
                    </th>
                    <th>
                        Target
                    </th>
                    <th>
                        Deadline
                    </th>
                    <th>
                        ActionBy
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in datalist1">
                    <td>
                        {{x.FileName}}
                    </td>
                    <td>
                        {{x.FileType}}
                    </td>
                    <td>
                        {{x.FileSize}}
                    </td>
                    <td>
                        {{x.AuthorSource}}
                    </td>
                    <td>
                        {{x.FileVersion}}
                    </td>
                    <td>
                        {{x.Category}}
                    </td>
                    <td>
                        {{x.Target}}
                    </td>
                    <td>
                        {{x.Deadline}}
                    </td>
                    <td>
                        {{x.ActionBy}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

script code:-

<script>
    var mypartone = angular.module("myApp", []);
    mypartone.controller("myCntrl", function ($scope, $http) {
        $http({
            method: "GET",
            url: "dmsrpt.asmx/GetAllData"
        }).then(function (response) {
            $scope.datalist1 = response.data;
        });
    });
</script>
Download FREE API for Word, Excel and PDF in ASP.Net: Download