AJAX call post method in AngularJS

Question

I'm new to AngularJS, this is a part of my controller.js file, I made the login controller work with the same service, of this one.

What I want to achieve now is to get the data from an AJAX call using a different method from my service and pass it like this to my HTML.

What is the proper way of doing so? This is as far as I've tried, and I wrote this code based on my previous Chrome Packaged App project. The difference is that in my first project I have a single javascript file to change display in my HTML, this time, I'm manipulating it through controllers, services and app.

.controller('VFCtrl', function($scope, $stateParams, $http, $ionicLoading, $state, $sce) {
        $ionicLoading.show({
            template: 'Loading...',
            duration: 1000
        });

        $http.post('myService/mysite.aspx',{action: 'someMethodFromService', ParameterFromMethod: 'someValue'})
              .success(function (response) 
              {
                  var htmldata='';
                  for(i=0;i<response.length;i++)
                  {
                      var htmlInfo = '<li><div class=\'col\'><a href="'+ response[i].Id +'"><img width=\'100%\' height=\'auto\' src="'+response[i].Image + '" class=\'profile-img\' /><h3>' +response[i].Name+'</h3><p>'+response[i].Title+'</p></a></div></li>';

                      htmldata+= htmlInfo;
                  }
                    $("#vflist").html(htmldata);
              })
       //I don't wanna change how to submit data in my html in the success part
       //But if it MUST be change then I will.
              .error(function(data, status, headers){
                 console.log(status);
              });

    })

If you're using angular, you should be able able to do what you're trying through bindings without the need for injecting html using jQuery. If you want to share data between pages, you can do that through a service. Every service is a singleton, so if you save the data to an object in a service and inject that service elsewhere, you'll have access to that data there. — Yatrix
– Yatrix, Commented Apr 23, 2016 at 3:20
hmm, I get the part that i'll be sharing data between pages using service, because that's what i'm doing, but isn't it bad practice to use jQuery why everything else is done by angularjs? — JC Borlagdan
– JC Borlagdan, Commented Apr 23, 2016 at 3:27
That's what I was saying about using bindings instead of injecting html. You can use an ng-repeat and bindings to create the li tags and the attributes on them. No need for jQuery at at all there. — Yatrix
– Yatrix, Commented Apr 23, 2016 at 3:34

Yatrix · Accepted Answer · 2016-04-23 03:59:34Z

2

You can set up an ng-repeat and bind the members of the objects in the array. While this isn't based on your code, this is a very simple example of how you can accomplish this: http://codepen.io/anon/pen/LNBrbG?editors=1010.

Basically, the element you put the ng-repeat on becomes the template for the repeat. So, if you nest 10 elements inside the element with the ng-repeat on it, that same structure will be repeated. It will repeat for as many items you bind to it. See the code pen for a working example.

<ul>
    <li ng-repeat="item in vm.items"><span style="color:red">{{ item.name }}</span></li>
<ul>

answered Apr 23, 2016 at 3:59

Yatrix

13.9k17 gold badges57 silver badges83 bronze badges

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

Comments

Shashank Agrawal · Accepted Answer · 2016-04-23 04:30:07Z

You don't need jQuery here at all, Angular is sufficient here. Also, manipulating DOM in Angular controller is not a good practice.

Consider changing your code like below working example (of course, the JSON structure is not the same as you asked):

var app = angular.module("sa", [])
app.controller('VFCtrl', function($scope, $http) {

  $http.get('http://jsonplaceholder.typicode.com/posts', {
      action: 'someMethodFromService',
      ParameterFromMethod: 'someValue'
    })
    .success(function(data) {
      $scope.posts = data;
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="VFCtrl">
  <ul id="vflist">
    <li ng-repeat="post in posts">
      <a href="{{post.id}}">{{post.title}}</a>
  </ul>
</div>

Collectives™ on Stack Overflow

AJAX call post method in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related