Sending parameters back to the server when making ajax calls

[brad.mc...@gmail.com]

Hi,

I'm an Angular newbie and I've made good progress with it so far. However, I'm having a little bit of trouble figuring out how to send parameters back to the server when making ajax calls. I've successfully used $http.post() to make the call and send back data that I hard code into a variable. But I'm not sure how to pull data from an element and pass it into the function to send back to the server. I've had it working in jQuery and I suppose I could do the same thing with jQuery once inside the function but I'm wondering what the best way to do this is using Angular.

When I tried to do something like this:

<a href="#" title="cert" data-filter-type="dFunc" data-ng-click="getData('CERT')">CERT</a>

 $scope.getData = function (data, param) {

        // Do Something...

    };

...I doesn't work which I'm sure isn't a surprise.

Here's a plunker. It doesn't work since it's setup to make server calls to an internal server.  But the code is there so any direction anyone can give me on how to proceed would be greatly appreciated.

Thanks!

Brad

[Peter Bacon Darwin]

Works for me: http://plnkr.co/edit/L62nAd?p=preview

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[brad.mc...@gmail.com]

Huh...well I had that all confused then. I was wondering why I was passing data into getData() thought maybe is was needed as part of the Angular magic. Thanks for clearing that up. And SUPER THANKS for the quick response.

[brad.mc...@gmail.com]

And this brings me to my next question. If I need to send multiple arguments what's the best way to do this?

This seems like it could get out of hand really quickly but would make the getData function a bit easier:

data-ng-click="getData('{pDraftingFunction: "cert", pStatus: null}')"

$scope.getData = function (data) {

     console.log(data.pDraftingFunction, data.pStatus);

 };

This looks better in the html but more complicated in the js and doesn't seem like the right way either:

data-ng-click="getData("cert", null)"

$scope.getData = function (pDraftingFunction, pStatus) {

     console.log(pDraftingFunction, pStatus);

 };

So what's the best way to handle something like this? I'd like to keep as much as I can out of the data-ng-* in the html if possible. With jQuery it was easy to grab attributes and do it that way but it required much more code. How does Angular intend for me to handle this?

 I updated the plunkr

[Peter Bacon Darwin]

In your jQuery version, how do you set the param parameter?

I would guess that some of this data is related to the thing you are clicking on and some of it is related to the underlying state of the model?

Generally in angular you would create a domain model of data for your business logic and this would hold the underlying state.  Then the click call would only need to pass parameters that were specifically related to this click.

I would even go so far as to call different methods from ng-click all the parameter is doing is telling the getData function to run a different code path.

Perhaps something like this?

http://plnkr.co/edit/YZhKcE

--

[brad.mc...@gmail.com]

Yes, in the jQuery version I'm grabbing a couple of attributes from the clicked element and passing them into the function and making decisions based on those attributes. So it looks like I just need to create separate functions for each set of params and call them accordingly. Like this: http://plnkr.co/edit/fwvV2F

[brad.mc...@gmail.com]

It doesn't appear that I can have the model populate the argument of a function that I'm calling using ng-click.

What I'd like to do:

<tr ng-repeat="item in Items">

<td ng-click="MyFunction( '{{item.number}}' )"></td>

</tr>

The param gets populated just but the click event won't fire.

But if I do that the click event doesn't even work. If I change it to this it works:

<tr ng-repeat="item in Items">

<td ng-click="MyFunction( '12345' )"></td>

</tr>

Can I not populate it this way? do I need to use jQuery to get the value of a different attribute which will hold {{item.number}}?

[brad.mc...@gmail.com]

I figure it out. I don't need to use the templating in the function call. All I need to do is this:

<td ng-click="MyFunction( item.number )"></td>