CODEWITHSUNDEEP
angularjs
kittu
kittu

Reputation: 7018

Unable to load data into table using ng-repeat

Code:

    var app = angular.module('myApp', ['smart-table']);
    app.controller('MyController', function ($scope) {
        $('#get').click(function ($scope)
        {
            $.ajax({
                url: 'JsonProcessor.do',
                type: 'get',
                dataType: 'json',
                success: function (data)
                {
                    $scope.rowCollection = data[0];
                    console.log("Result from Database: ", data[0]);
                    console.log("typeOf json is: " + jQuery.type(data));
                }
            });
            $('#dialog').show();
        });
    });

<div id="dialog" class="bs-example web_dialog">
    <table st-table="rowCollection" class="table table-striped">
        <thead>
            <tr>
                <th>Unique Id</th>
                <th>Date Created</th>
                <th>Doc Url</th>
                <th>Time Stamp</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rowCollection">
                <td>{{row.ID}}</td>
                <td>{{row.DATE_CREATED}}</td>
                <td>{{row.URL}}</td>
                <td>{{row.TIMESTAMP}}</td>
            </tr>
        </tbody>
    </table>
</div>

Is it because I am not using $http to fetch the data? I tried with $http and it throwing error: 

Uncaught TypeError: $http is not a function(anonymous function)
@ (index):197jQuery.event.dispatch 
@ joint.js:4683jQuery.event.add.elemData.handle
@ joint.js:4367

Checking the DOM shows only table header and <tbody> commented out.

I am guessing angular js is conflicting with jquery functions?

Upvotes: 0

Views: 489

Answers (2)

Magus
Magus

Reputation: 15124

Your problem is that you are trying to mix jQuery and Angular. It is not safe and not recommanded by anyone.

Angular can't know that jQuery is working because you use a jQuery listener (with $('#get').click(...)). If you want to use Angular, just use it. Use the ng-click directive and use the $http service.

var app = angular.module('myApp', ['smart-table']);

app.controller('MyController', function ($scope, $http) {
    $scope.get = function() {
        $http.get('JsonProcessor.do').success(function(data) {
            $scope.rowCollection = data[0];
            console.log("Result from Database: ", data[0]);
            console.log("typeOf json is: " + jQuery.type(data));
        });
        $('#dialog').show();
    });
});

<div id="get" ng-click="get()">GET</div>
<div id="dialog" class="bs-example web_dialog">
    <table st-table="rowCollection" class="table table-striped">
        <thead>
            <tr>
                <th>Unique Id</th>
                <th>Date Created</th>
                <th>Doc Url</th>
                <th>Time Stamp</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rowCollection">
                <td>{{row.ID}}</td>
                <td>{{row.DATE_CREATED}}</td>
                <td>{{row.URL}}</td>
                <td>{{row.TIMESTAMP}}</td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 1

charlietfl
charlietfl

Reputation: 171700

Any event outside of angular core that changes the scope needs to notify angular to run a digest cycle to update the view.

Since you are not using angular $http to make the ajax request you will need to do this within the success callback

success: function (data){
    $scope.rowCollection = data[0];
    $scope.$apply();
    console.log("Result from Database: ", data[0]);
    console.log("typeOf json is: " + jQuery.type(data));
}

The error that $http is not a function would mean you did not inject $http into controller

Upvotes: 1

Related Questions