Deborah Deborah - 6 months ago 23
AngularJS Question

Error with AngularJS

I am new to AngularJS and here I am facing an issue. I have a page with submit button, when i click on submit modal has to open and the data from URL has to be present inside modal. Right now, modal opens but that is empty and not fetching data from URL.Below is the code I have:

Index.html:

<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>Modal</h3>
</div>
<div class="modal-body">
{{items}}
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Close</button>
</div>
</script>
<button class="btn" ng-click="open()">Submit</button>
</div>
</body>
</html>


example.js:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log, $http) {


//$scope.items = ['item1', 'item2', 'item3'];

$scope.open = function () {
debugger
$http.get("URL")
.success(function (response) {
debugger
$scope.items = response.data.Table;
console.log(response.Table);
});
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.items;
}
}
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;

$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};


Errors Iam getting after clicking on submit is:


Failed to load resource: the server responded with a status of 404
(Not Found)

Failed to load resource: the server responded (url I am using for local host) with a status of 405 (Method Not Allowed)


Here is a demo plunker

Where is this going wrong? Hope anyone can help. Thanks in advance!!

Answer

I updated your code little bit...
Now its working fine

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log, $http) {

    $scope.open = function () {
        $http.get("http://jsonplaceholder.typicode.com/posts")
          .success(function (response) {
              var modalInstance = $modal.open({
                  templateUrl: 'myModalContent.html',
                  controller: 'ModalInstanceCtrl',
                  resolve: {
                      items: function () {
                          return response;
                      }
                  }

              });
          });


    };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
    $scope.items = items;

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};  

Issue was the return in the resolve function.now its fine.
Another thing, your results are set of data in an array. so you have to loop it.