Search code examples
javascriptjqueryangularjsangular-ui-routerangularjs-scope

ng-click is not giving any response while hitting web api

The html page is here with the whole code.

<body ng-app="mymodule">
    <label>Search:</label><input type="text" placeholder="Search Here" ng-model="search" />
    <table ng-controller="cntrlbtn" class="table table-bordered">
        <tr ng-repeat="resp in inp">
            <td></td>
        </tr>
    </table>
    <table ng-controller="mycontroller" class="table table-bordered">
        <tr ng-repeat="resp in res | filter :search" >
            <td colspan="1"><input type="button" class="btn btn-danger" value="{{resp.ct_nm}}" ng-click="click(resp.ct_nm);" /></td>       
        </tr>
    </table>
    <span ng-repeat="resp in res" ng-controller="mycontroller">
        <button ng-click="click(resp.ct_nm);">{{resp.ct_nm}}</button>
    </span>
    <table ng-controller="mycontroller" class="table table-bordered">
        <tr ng-repeat="resp in inp">
            <td colspan="1">{{resp.sbct_nm}}</td>
        </tr>
    </table>

And the angular script is here.The main API i.e http://localhost/Publish/ProductCategory/GET' is working.But the second API i.e in $scope.click is not working.Testing the API outside is giving values.

In google chrome developers tool,it is hitting the API but not getting any response.

var appmodule = angular.module('mymodule', []).controller('mycontroller', function ($scope, $http,$location,$anchorScroll) {
  $http.get('http://localhost/Publish/ProductCategory/GET').then(function (response) {
    $scope.res = response.data;
  });

  $scope.click = function (btnval) {
    debugger;
    $http.get('http://localhost/Publish/ProductSubCategory/GET?pdnm=Laptop').success(function (btnres) {
      $scope.inp = btnres;
    });
  };
});
Solution

  • I just tried your code and it works fine. But you need to remove all the extra

    ng-controller="mycontroller"

    in your html as they are causing angular errors, so that it looks like this:

    <label>Search:</label><input type="text" placeholder="Search Here" ng-model="search" />
    <table class="table table-bordered">
        <tr ng-repeat="resp in inp">
            <td></td>
        </tr>
    </table>
    <table class="table table-bordered">
        <tr ng-repeat="resp in res | filter :search" >
            <td colspan="1"><input type="button" class="btn btn-danger" value="{{resp.ct_nm}}" ng-click="click(resp.ct_nm);" /></td>       
        </tr>
    </table>
    <span ng-repeat="resp in res" >
        <button ng-click="click(resp.ct_nm);">{{resp.ct_nm}}</button>
    </span>
    <table class="table table-bordered">
        <tr ng-repeat="resp in inp">
            <td colspan="1">{{resp.sbct_nm}}</td>
        </tr>
    </table>