Angularjs is not displaying update data in table row, ng-repeat not working properly?

Question

I'm trying to get Angular to display JSON data that I've managed to pull from a database and console also printing the data as expected, but table ng-repeat not displaying the data. even outside of the table data display properly.

<!DOCTYPE>
<html ng-app="nodeapp">

<head>
    <title>AngularJs with Nodejs</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>

<body>
    <div class="container" ng-controller="nodeappctrl">
        <div class="row">
            <h1>Angularjs with api's</h1>
            <p>{{contactlists[0].name}}</p>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <table class="table">
                <thead>
                    <tr>
                        <th>SNo</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="contact in contactlists">
                        <td>{{$index}}</td>
                        <td>{{contact.name}}</td>
                        <td>{{contact.email}}</td>
                        <td>{{contact.number}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
    <script type="text/javascript">
        var nodeapp = angular.module('nodeapp', []);

        nodeapp.controller('nodeappctrl', ['$scope', '$rootScope', '$log', '$http',
            function($scope, $rootScope, $log, $http) {
                var contactlist = {};
                $http.get('/contactlist').success(function(data) {
                    $scope.contactlists = data;
                    //$scope.$apply();
                    console.log(JSON.stringify($scope.contactlists), null,2);
                });
            }
        ]);
    </script>

    <!--
    // dummy data
    var contactlists =[
        {
            name: 'Rajesh',
            email: '[email protected]',
            number: '11 - 111 - 11111'
        }, {
            name: 'Rajesh2',
            email: '[email protected]',
            number: '22 - 222 - 222222'
        }, {
            name: 'Rajesh3',
            email: '[email protected]',
            number: '33 - 333 - 333333'
        }
    ]-->

</body>
</html>
</html>

Create a plunker and I'll help.

Gene
– Gene

2016-03-27 18:48:07 +00:00
Commented Mar 27, 2016 at 18:48 — Gene
– Gene, Commented Mar 27, 2016 at 18:48

Surjeet Bhadauriya · Accepted Answer · 2016-03-28 06:29:20Z

3

Place ng-controller inside the <body> tag. You used it in the <div> which is closed, so it's can't be available to the rest bottom of the code.

<body ng-controller="nodeappctrl">

//your code here..

</body>

answered Mar 28, 2016 at 6:29

Surjeet Bhadauriya

7,2243 gold badges39 silver badges54 bronze badges

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

Comments

George Kagan · Accepted Answer · 2016-03-27 18:50:18Z

1

The problem is here:

<div class="container" ng-controller="nodeappctrl">

The nodeappctrl controller should be applied to a tag that is a parent of where you're accessing its scope. As you can see, the table is a child of a sibling of the element the controller is bound to.

For example, move ng-controller="nodeappctrl" to the body tag.

answered Mar 27, 2016 at 18:50

George Kagan

6,1448 gold badges50 silver badges50 bronze badges

Collectives™ on Stack Overflow

Angularjs is not displaying update data in table row, ng-repeat not working properly?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related