Error in ajax call using angular js

Question

I am new to angular js .I tried making a small program that consists of ajax call using angular js $http .I guess I am some where wrong ,doing some mistake. Would be happy If someone helps out. Following is code snippet

login.html

    <head></head>

    <body>
        <form ng-app="" ng-controller="validateCtrl" name="myForm" novalidate>
            <div ng-hide="var">
                 <h2><center>SIGN-IN</center></h2>

                <p>Username:
                    <br>
                    <input type="text" name="user" ng-model="user" required><span style="color:red" ng-show="myForm.user.$error.required" />Username is required</p>
                <p>Password:
                    <br>
                    <input type="password" name="password" ng-model="password" required /> <span style="color:red" ng-show="myForm.password.$error.required">Password is required.</span>

                    <p>
                        <input type="submit" ng-click="validate()" ng-disabled=" myForm.user.$invalid ||  
 myForm.password.$invalid" />
                    </p>
            </div>
            <div ng-hide="welcomeVar"> <span> {{ listOfCustomers  }} </span> 
                 <h2><center>Welcome! {{ user }}</center></h2>

                <button class="list" ng-click="customerList()">List of Customers</button>
                <ul>
                    <li ng-repeat="x in listOfCustomers">{{ x.CustomerID + ', ' + x.CompanyName }}</li>
                </ul>
                <br>
                <button class="signout" ng-click="validate()">Log Out</button>
            </div>
        </form>

JS part:

<script>
            function validateCtrl($scope, $http) {
                $scope.user = 'ABC XYZ';
                $scope.password = 'abcbc';
                $scope.welcomeVar = true;

                $scope.
                var = false;
                $scope.validate = function() {
                    $scope.
                    var = !$scope.
                    var;
                    $scope.welcomeVar = !$scope.welcomeVar
                };
                $scope.listOfCustomers = null;

                $scope.customerList = function() {
                    $http.get("http://www.iNorthwind.com/Service1.svc/getAllCustomers")
                        .success(function(data) {
                        $scope.listOfCustomers = data;
                    })
                        .error(function(data) {
                        $scope.user = 'Xyz';
                    });
                };
            }
        </script>

When i click on "List Of Customers" button which calls the related url link that link does not get invoked by ajax and the control goes to error part of function. — user1871812, Dec 09 '14 at 09:39

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

Your code is fine, except some syntax errors, but I hope it's because you tried to remove somrthing before posting code here ;)

Also the response for your request have this structure: {GetAllCustomersResult : [//here an array of elements]} , so, in success response handler you'll have to do: $scope.listOfCustomers = data.GetAllCustomersResult ;

But it's a minor things, the main issue described here:

AngularJS performs an OPTIONS HTTP request for a cross-origin resource

To debug this, you had to open developer tools in any browser('F12' is common key to open it), and look in console and network requests.

edited May 23 '17 at 11:43

Community

1
1

answered Dec 09 '14 at 10:00

Rasalom

3,001
3
16
28

Thanks for your help. It worked properly in other browser like Mozilla , Chrome but had issue with IE version less than 10. One has to set "Access to other domains" property in Security Tab of Internet Options as Enabled then it worked for IE < 10 – user1871812 Dec 10 '14 at 04:54

Error in ajax call using angular js

1 Answers1