CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsajax
Gaurav_0093
Gaurav_0093

Reputation: 1020

table is not binding in angularjs

Hello everyone I am trying to bind a table in angulajs. I am getting data from database in table and trying to fill that table. Here I did

$scope.getPageDetails = function () {
    $http.get('/api/privilege/getpagedetails/')
        .success(function (data, status) {
            $scope.Page = data;
            console.log($scope.Page);
        }).error(function () {
        });
}

then i get the data in $scope.Page which is defined as $scope.Page = []; here i am attaching the console image that i am getting data in $scope.pageenter image description here

and here is my table 

<table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>
                                ID
                            </th>

                            <th>
                                PageName
                            </th>

                            <th>
                                PageUrl
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="Page in Pages">
                            <td>{{Page.id}}</td>
                            <td>{{Page.pageName}}</td>
                            <td>{{Page.pageUrl}}</td>
                            <td>
                                <input type="checkbox"  value="Edit" />
                            </td>
                        </tr>
                    </tbody>
                </table>

please help where I am missing I will be very thankful to you all.

Upvotes: 0

Views: 630

Answers (4)

ocespedes
ocespedes

Reputation: 1293

In your view you are iterating over Pages, but I dont see it defined in your controller.

Change

$scope.Page = data;

to 

$scope.Pages = [data];

Final Code HTML:

<table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>
                            ID
                        </th>

                        <th>
                            PageName
                        </th>

                        <th>
                            PageUrl
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="Page in Pages">
                        <td>{{Page.id}}</td>
                        <td>{{Page.pageName}}</td>
                        <td>{{Page.pageUrl}}</td>
                        <td>
                            <input type="checkbox"  value="Edit" />
                        </td>
                    </tr>
                </tbody>
            </table>

controller:

$scope.getPageDetails = function () {
$http.get('/api/privilege/getpagedetails/')
    .success(function (data, status) {
        $scope.Pages = [data];
    }).error(function () {
    });

}

EDIT: if your data is an object make it an array, so ng-repeat can iterate over it

Upvotes: 1

Ganesh Khaire
Ganesh Khaire

Reputation: 19

$scope.getPageDetails = function () {
    $http.get('/api/privilege/getpagedetails/')
        .success(function (data, status) {
            $scope.Pages = data; //change page to pages in whole code,  
                                 //no need to change any thing in html page
            console.log($scope.Pages);
        }).error(function () {
        });
}

Upvotes: 1

Marcin Majkowski
Marcin Majkowski

Reputation: 420

Change $scope.Page = data to $scope.Pages = data.

Upvotes: 0

Adrien
Adrien

Reputation: 561

$scope.Page in controller vs Pages in your HTML ng-repeat binding, you need to write $scope.Pages :)

Upvotes: 0

Related Questions