how to keep previous ng-click initialized value as ng-init value upon refreshing the page

Question

I have ng-repeat in which for each image the count of like and dislike buttons are changed.

However, upon refreshing the page it is giving the ng-init value instead of the previous incremented count of the like and dislike value.

How do I keep the incremented value even after refreshing the page?

<button class="btn btn-default" id="{{$index}}" ng-click="count1=count1+1" ng-init="count1=15">Upvote <span class="badge">{{count1}}</span></button>

<button class="btn btn-default" id="{{$index}}" ng-click="count=count+1" ng-init="count=15">Downvote<span class="badge">{{count}}</span></button>

Answer 1

If you hard code the value in the ng-init it will always be the same. You could keep track of the like and dislike count by saving it's value in the HTML 5 localstorage or use an ajax request to save and retreive the dislike data from a server with a database.

Answer 2

ng-init will always be evoked on a page refresh. You will need a persistent back end / database of some kind, or as Nicolas stated, HTML 5 localstorage, to save your count values to outside the DOM.

You could also use something like json-server .

Here is an article on setting it up and playing with it.

This article shows you how to connect it with Angular 4. Not the version of Angular you are using, but reading through it may help you conceptualize getting your count data from Angular to a persistent place.

Answer 3

您可以将递增的值保存在HTML 5 Storage，数据库和cookie中，因为每当页面重新加载时，它将重新初始化该值。