angularJS ng-model not updating values in controller

Question

I don't know what I am missing!

I have a legend, and the user can choose each color's description, but when I try and edit the text, it gets updated in the view, but as soon as I refresh all the changes are reverted, so how can I keep the changes in the controller?

<div ng-repeat="s in legendItems">
 <div class="epLegendeColorBoxPopover" ng-style='{"background-color": s.color}'></div><input type="text" ng-model="s.description">
</div>

here a fiddle

http://jsfiddle.net/NfPcH/23697/

thank you

angular will not save data. it will be into his default form when you refresh the page. you will have to save data at some particular event. this could be blur or a button click — Taylor Rahul, May 01 '18 at 10:05
I can see it updated when your change its value from the fiddle you shared — Taylor Rahul, May 01 '18 at 10:06
angularjs is used for SPAs (Single Page Applications), it's not supposed to refresh and leave a single page. It only renders different content. Every time you refresh it will reset everything in view. — Aleksey Solovey, May 01 '18 at 10:07
couldn't I put a button next to the input field, with an ng-click that updates the values in the controller? how would that ng-click look like? thank you — AJ-, May 01 '18 at 10:12
@AJ989 if you want to detect changes immediately, add `ng-changed="your_function()"` to your input field. What changes do you want to make? — Aleksey Solovey, May 01 '18 at 10:14
I want that the description value of my array of objects gets updated with the value put in the input field, and stays like that, in the future I ll have the values come from a DB so I'll send the changes there, but for now I would like to being able to update the values in the controller if possible — AJ-, May 01 '18 at 10:16
@AJ989 if you are planning on storing the data after a refresh, you need [`localstorage`](https://stackoverflow.com/questions/26118851/retain-angular-variables-after-page-refresh). However, if you are planning on redirecting without refreshing the page, then the values can be saved in a service/factory with some kind of getter/setter functions that will update the array that you store — Aleksey Solovey, May 01 '18 at 10:20
ok thank you very much for clearing this point for me, wasn't so clear before — AJ-, May 01 '18 at 10:25

score 2 · Answer 1 · answered May 01 '18 at 10:14

2

You are not saving it anywhere so on reload controller initialise its $scope variables. For permenent changes you should use Some database or you can use Localstorage

answered May 01 '18 at 10:14

khateeb

163
6

but you could have posted this in comment section since you have 50 rps in your account. if anyone mark it as vote down you will loose your rps , rest is your choice – Taylor Rahul May 01 '18 at 10:38

score 1 · Accepted Answer · answered May 01 '18 at 11:59

1

Well since you have not given any information where the data is to be stored... I'm using localStorage

Fiddle : http://jsfiddle.net/NfPcH/23699/

Using localStorage is not a good practice... But basically solves your problem...

answered May 01 '18 at 11:59

Devansh J

4,006
11
23

thank you very much, this is what I needed for now, until I get the data from a DB where I can send to the changes, I'll use localStorage! – AJ- May 02 '18 at 09:33
Np... Happy to help! :) – Devansh J May 02 '18 at 09:35

angularJS ng-model not updating values in controller

2 Answers2