not able to call $http in angularjs

Question

I want to call a service through http for a dropdown list in angularjs. But, the function is not going to execute the http service method.

im binding the dropdown list by ajax call , after binding the ajax call i would like to show the details of the selected value from ajax call.

 <script type="text/javascript">
    var app = angular.module('myApp', [])
    app.controller('myCtrl', function ($scope, $http, $window) {
        $scope.DefaultLabel = "Loading.....";
        var post = $http({
            method: "POST",
            url: "/PIRDetails/AjaxMethod",
            dataType: 'json',
            data: {},
            headers: { "Content-Type": "application/json" }
        });
        post.success(function (data, status) {
            $scope.DefaultLabel = "Please Select PIR Device";
            $scope.Customers = data;
        });
        post.error(function (data, status) {
            $window.alert(data.Message);
        });

        $scope.getPIRData = function (id) {
            $http.get("/PIRDetails/GetPIRStatus/e203")
                .then(function (response) {
                    $scope.myWelcome = response.data;
                });
        };
    });

</script>
<div ng-app="myApp" ng-controller="myCtrl">
    <select class="form-control" onchange="getPIRData(this.value);">
        <option value="0" label="{{DefaultLabel}}"></option>
        <option ng-repeat="customer in Customers" value="{{customer.Value}}">{{customer.Text}}</option>
    </select>
</div>

it looks like you don't understand how angularjs works - why do you wrap a function around your controller and call that everytime your select element changes ? This doesn't make any sense - you should try to read some tutorials out there. — Atural
– Atural, Commented Mar 23, 2019 at 11:42

Shashank Vivek · Accepted Answer · 2019-03-23 13:53:43Z

2

Try ng-change and not onchange

<div ng-app="myApp" ng-controller="myCtrl">
    <select class="form-control" ng-change="getPIRData(this.value);">
        <option value="0" label="{{DefaultLabel}}"></option>
        <option ng-repeat="customer in Customers" value="{{customer.Value}}">{{customer.Text}}</option>
    </select>
</div>

A demo code here

edited Mar 23, 2019 at 13:53

answered Mar 23, 2019 at 12:42

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

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

Comments

Harshana · Accepted Answer · 2019-03-23 13:26:23Z

1

As @ sinkatonte mentioned in the comment, The way you use angularjs is completely incorrect. You don't need to define angularjs application and controller inside a function. Use the following way to correct your code.

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
    $scope.getPIRData = function(id) {
        $http.get("/PIRDetails/GetPIRStatus/e203")
            .then(function (response) {
                $scope.myWelcome = response.data;
        });
   };
});


<div ng-app="myApp" ng-controller="myCtrl">
    <select class="form-control" ng-change="getPIRData(this.value);">
        <option value="0" label="{{DefaultLabel}}"></option>
        <option ng-repeat="customer in Customers" value="{{customer.Value}}">{{customer.Text}}</option>
    </select>
</div>

Make sure the response.data in the $http returns data is in correct format and there is a value for this.value used in ng-change="getPIRData(this.value)

edited Mar 23, 2019 at 13:26

answered Mar 23, 2019 at 11:59

Harshana

5343 silver badges16 bronze badges

3 Comments

krishna mohan Over a year ago

i have changed my code, can u check my updated code and can u tell y getting error - Uncaught ReferenceError: getPIRData is not defined at HTMLSelectElement.onchange

Harshana Over a year ago

@krishnamohan there is no method called onchange in angularjs, it should be ng-change. Corrected the answer.

krishna mohan Over a year ago

getting error - Error: error:ctreq Missing Required Controller. first time loading its calling that getpirdata method and getting error.

Collectives™ on Stack Overflow

not able to call $http in angularjs

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related