locked
I am new in angular JS. And this is the first time I wrote a bit of code using Angular JS by watching a tutorial. But in that video tutorial the code works properly, but my code is not working. My web page is showing a blank page. RRS feed

  • Question

  • User229488726 posted

    The index.html

    div body ng-app="angularTable">
    <div class="all_cat_main" ng-controller="listdata">
    <div class="all_cat" ng-repeat="state in statelist">

    <h2>{{state.Satename}}</h2>


    </div>


    </div>

    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="~/Content/AppJS/AllSate.js"></script>

    And the AllSate.js

    var app = angular.module('angularTable', []);

    app.controller('listdata', function ($scope, $http) {
    debugger

    $scope.statelist = []; //declare an empty array

    $.ajax({
    url: "/JobWebApi/getDataForAngularGrid",
    dataType: 'jsonp',
    method: 'GET',
    data: '',

    }).success(function (response) {
    debugger;

    $scope.statelist = response;

    })
    .error(function (error) {
    alert(error);
    });


    });

    Please someone explain why the code is not working?

    Friday, August 26, 2016 6:48 AM

Answers

All replies

  • User1992938117 posted

    $scope.statelist = response;

    user as:

    $scope.statelist = response.data;

    Working example:

    Index.html:

    <!DOCTYPE html>
    <html ng-app="angularTable">
    <head>
        <title></title>
    </head>
    <body>
        <table ng-controller="listdata" border="1">
            <tr ng-repeat="x in statelist">
                <td>{{x.title}}</td>
                <td>{{x.id}}</td>
            </tr>
        </table>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="Scripts/AllSate.js"></script>
    </body>
    
    </html>

    AllSate.js:

    var app = angular.module('angularTable', []);
    
    app.controller('listdata', function ($scope, $http) {
        $scope.statelist = []; //declare an empty array
        var root = 'http://jsonplaceholder.typicode.com';
            $http({
                method: "GET",
                url: root + '/posts',
            }).then(function mySucces(response) {
                $scope.statelist = response.data;
            }, function myError(response) {
                $scope.status = response.statusText;
            });
        });

    Saturday, August 27, 2016 9:52 AM
  • User61956409 posted

    Hi brajalalbrp,

    Firstly, please make sure if there are any error in Console tab in developer tools.

    Secondly, you could use F12 developer tools Network tool to check if ajax request is sent and you could get the response as expected.

    https://msdn.microsoft.com/en-us/library/dn255004(v=vs.85).aspx

    Besides, you could refer to the example in this article to call webmethod using angularjs.

    http://www.c-sharpcorner.com/code/1270/calling-webmethod-using-angularjs.aspx

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 1, 2016 6:53 AM