table is not binding in angularjs

Question

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.page

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.

$scope.Page should be $scope.Pages

asdf_enel_hak
– asdf_enel_hak

2016-12-07 14:41:52 +00:00
Commented Dec 7, 2016 at 14:41 — asdf_enel_hak
– asdf_enel_hak, Commented Dec 7, 2016 at 14:41

ocespedes · Accepted Answer · 2016-12-07 15:04:37Z

1

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

edited Dec 7, 2016 at 15:04

answered Dec 7, 2016 at 14:44

ocespedes

1,3034 gold badges14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gaurav_0093 Over a year ago

what should i have to do in n-repeat

ocespedes Over a year ago

If you point to the correct reference in your controller (changing $scope.Pages = data;), no work needed on the ng-repeat. Angular will do the rest

Gaurav_0093 Over a year ago

Not woking sir i changes the page to pages but not binding in ng-repeat

ocespedes Over a year ago

What is the content of data if it just an object you can wrap it within an array, because ng-repeat works with arrays something like $scope.Pages = [data]; in order to work, but If this will be used only once I dont see the use of using ng-repeat, you could just build the table with the object.

Gaurav_0093 Over a year ago

I did this<tbody> <tr ng-repeat="Pages in Page"> <td>{{Pages.id}}</td> <td>{{Pages.pageName}}</td> <td>{{Pages.pageUrl}}</td> <td> <input type="checkbox" value="Edit" /> </td> </tr> </tbody> But this is not binding..

|

Ganesh Khaire · Accepted Answer · 2016-12-07 14:55:55Z

1

$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 () {
        });
}

answered Dec 7, 2016 at 14:55

Ganesh Khaire

194 bronze badges

5 Comments

Ganesh Khaire Over a year ago

what you are getting here is normal object with one key and value json.

Ganesh Khaire Over a year ago

ng-repeat works on array of objects.. here you can directly bind the $scope with the view.

Ganesh Khaire Over a year ago

$scope.getPageDetails = function () { $http.get('/api/privilege/getpagedetails/') .success(function (data, status) { $scope.Page = data; //sorry dont change here remove ng- //repeat from the html file console.log($scope.Page); }).error(function () { }); }

Ganesh Khaire Over a year ago

<table class="table table-bordered table-hover"><thead><tr><th>ID</th><th>PageName</th><th>PageUrl</th></tr></thead><tbody><tr><td>{{Page.id}}</td><td>{{Page.pageName}}</td><td>{{Page.pageUrl}}</td><td><input type="checkbox" value="Edit" /></td></tr></tbody></table>

Ganesh Khaire Over a year ago

@Gaurav_0093 use ng-model in the td tag like

Adrien · Accepted Answer · 2016-12-07 14:43:25Z

0

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

answered Dec 7, 2016 at 14:43

Adrien

5612 gold badges7 silver badges19 bronze badges

Comments

Marcin Majkowski · Accepted Answer · 2016-12-07 14:44:33Z

0

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

answered Dec 7, 2016 at 14:44

Marcin Majkowski

4206 silver badges6 bronze badges

1 Comment

Gaurav_0093 Over a year ago

yes I changed it according to you but what should i Do in ng-repeat

Collectives™ on Stack Overflow

table is not binding in angularjs

4 Answers 4

6 Comments

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related