Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

"myData" in the code below is a json object which I extract from $http.get response (I call the request when my web app is initialised). User has to be able to change the data, so I created the code below with inputs that are filled with values in this object.

<div ng-repeat="(parameter,value) in myData">
    <p>{{parameter}}</p>
    <!-- show only if val is defined (not 0 or null) -->
    <div ng-repeat="(par,val) in value" ng-show="val">
        <p>{{par}} : <input type="text" value={{val}}></p> <!-- val is the value the user can change, and par is  the parameter name such as in { parameter: "value" } -->
    </div>
</div>

I created the button that the user can click when he wants to save the changed data (ng-onclick="saveData()").

saveData function could then use $http.put(url,data) to update the data somewhere…

What I don't know is how to pass the whole object to the saveData() function ? I know you can pass everything just by adding it like saveData(myVariableOrObject), but I don't see how I would do that in my case.

Probably I am missing something here, since I am fairly new with angularJS. Should my html inputs have some kind of ng-model there that would connect values to controller somehow? I would probably figure this out, but with the whole object, hm ? Would I need to construct the object in a controller function again or is there an easier approach?

If anyone can point me in the right direction I would be glad.

If I was unclear please ask for more info.

Thank you!

share|improve this question
    
Try onclick="saveData(myData)" –  Gruff Bunny Feb 2 at 19:37
add comment

4 Answers

up vote 1 down vote accepted
<input type="text" ng-model="myData[parameter][par]">
share|improve this answer
    
Your answer to my question above :) thanks! –  trainoasis Feb 3 at 8:08
add comment

I thing ng-form is good solution for this: http://docs.angularjs.org/guide/forms

share|improve this answer
    
hmm.. i think my double ng-repeat wouldn't work well with it? How would i define ng-model values? –  trainoasis Feb 3 at 8:07
    
You can define it as Matjaz answered <input type="text" ng-model="myData[parameter][par]"> and pass myData object to ng-click function –  Rokas Feb 3 at 9:28
add comment

I've written a quick JSFiddle, which you can view here: http://jsfiddle.net/jakemulley/3AK79/1/

As you can see, the 'data' is linked to the ng-model attribute on both inputs, which means you don't need value={{val}}.

Also, which is probably worth noting, is that forms can have the ng-submit attribute, which calls the function inside upon submitting the form (in this case, save(user)).

Note 1: The data provided here can be replaced with your http.get data.

Note 2: By passing through 'user', you get both the username and displayname, which you can post to http.put as the data.

Does that help at all?

share|improve this answer
    
thank you, it did help, but unfortunately the exact ng-model answer above helped even more! –  trainoasis Feb 3 at 8:09
add comment

First of all it's not ng-onclick it's ng-click.

Secondly, {{val}} expression is a one-way binding. Which means changes inside your input tag won't affect val variable. You will need to use ng-model for two-way binding. After that you can easily ng-click="saveData(myData)" or just ng-click="saveData()" and get values inside the controller with $scope.myData .

share|improve this answer
    
Yeah, i know, i wrote it correctly in my title, my bad :) thanks for your answer, though Matjaz's answer was directly what I needed –  trainoasis Feb 3 at 8:11
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.