CODEWITHSUNDEEP
javascriptangularjsasp.net-mvc
krishna mohan
krishna mohan

Reputation: 147

not able to call $http in angularjs

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>

Upvotes: 0

Views: 59

Answers (2)

Shashank Vivek
Shashank Vivek

Reputation: 17504

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

Upvotes: 2

Harshana
Harshana

Reputation: 534

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)

Upvotes: 1

Related Questions