CODEWITHSUNDEEP
javascriptjqueryangularjs
Vijju Sena
Vijju Sena

Reputation: 183

How to resume counter from last ended

I have added some input fields in a form using counter method, and I saved that form. When I am trying to add fields again in to the form, the counter is starting from 0.

For example, I added 5 input fields. Those input field model values have taken 0,1,2,3,4,5. When I started adding fields after saving form, the counter is taking again from starting, means the result has come like this: {0,1,2,3,4,5,0,1,2,-----}.

How can I start the counter from last ended number?

Updated 

var app = angular.module('myapp', ['ngSanitize']);

app.controller('AddCtrl', function ($scope, $compile) {
$scope.singleFields = [];
    var counter = 0;
    $scope.addNew_SingleField = function (index) {
        $scope.singleFields[counter] = {single: 'untitled'};
        var singlehtml = '<div ng-click="selectSingle(singleFields[\'' + counter + '\'])">\n\
<label>{{singleFields[' + counter + '].single}}</label>\n\
<input type="text"></div>';
        var single = $compile(singlehtml)($scope);
        angular.element(document.getElementById('drop')).append(single);
        ++counter;
    };
    $scope.selectSingle = function (val) {
        $scope.singleField = val;
        $scope.showName = true;
    };
});
<!DOCTYPE html>
<html ng-app="myapp">

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
	<script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>
</head>

<body ng-controller="AddCtrl">
	<button ng-click="addNew_SingleField($index)">Single Line Text</button>
	<div id="drop"></div>

	<form ng-show="showName">
		<div class="form-group">
			<label>Field Label(?)</label>
			<br/>
			<input ng-model="singleField.single">
		</div>
	</form>

</body>

</html>

Upvotes: 2

Views: 156

Answers (3)

Ro Lewis
Ro Lewis

Reputation: 76

If you want to save the counter value so that it continues from the last value on reload you could use a simple service to hold the value. If you want to persist this value in local storage or a cookie you could extend the function to that.

    angular.
    module('myServiceModule', []).     
    factory('counterService', [function() {
       var _counter = 0;

       function _get() {        
                return _counter;            
        }

       function _set(value) {
               _counter = value;
       }


        return {
            get: _get,
            set: _set
        }
     }]);

The main changes to your controller would be to get the counter starting value from the service. Then update the service with the changed counter value.

var app = angular.module('myapp', ['ngSanitize', 'myServiceModule']);

app.controller('AddCtrl', function ($scope, $compile, counterService) {
$scope.singleFields = [];
    var counter = counterService.get(); //gets the current value from service
    for(var i =0; i < counter; i++){
      $scope.addNew_SingleField(i);
    }

    $scope.addNew_SingleField = function (index) {
        $scope.singleFields[counter] = {single: 'untitled'};
        var singlehtml = '<div ng-click="selectSingle(singleFields[\'' + counter + '\'])">\n\
<label>{{singleFields[' + counter + '].single}}</label>\n\
<input type="text"></div>';
        var single = $compile(singlehtml)($scope);
        angular.element(document.getElementById('drop')).append(single);
        ++counter;
        counterService.set(counter); //make sure to update the stored value
    };
    $scope.selectSingle = function (val) {
        $scope.singleField = val;
        $scope.showName = true;
    };
});

Upvotes: 2

Larry Rubin
Larry Rubin

Reputation: 123

You can use something like local storage in order to store the counter value in between sessions. Replace var counter = 0; with something like 

var counter; 
if(localStorage['counter'] != undefined){
    counter = JSON.stringify(localStorage['counter']).value;
}
else{
    counter = 0;
}

Note that you should save your counter as a property of an object, like localStorage['counter'] = {value: 5} otherwise your index will be cast to a string.

This would work after opening / closing the page. If you were talking about maintaining the counter past the scope being destroyed (say on a page navigation), then you could use an angular service, although using localStorage can also work in this case.

Upvotes: 3

Ro Lewis
Ro Lewis

Reputation: 76

The structure of your code is really not correct. In Angular you don't really manipulate the DOM in the controller code. Your counter isn't needed really. Simply push onto your array with each click, then pass the reference to the element in your repeat statement.

In your template you could use an ng-repeat instruction:

<!DOCTYPE html>
<html ng-app="myapp">

<body ng-controller="AddCtrl">
    <button ng-click="addNew_SingleField()">Single Line Text</button>
    <div id="drop">
      <div ng-repeat="item in singleFields" ng-click="selectSingle(item)">
        <label>{{item.single}}</label>
        <input type="text" />
      </div>
</div>

    <form ng-show="showName">
        <div class="form-group">
            <label>Field Label(?)</label>
            <br/>
            <input ng-model="singleField.single">
        </div>
    </form>

</body>

</html>

Then just simplify the add new function.

$scope.addNew_SingleField = function (index) {

        $scope.singleFields.push({single: 'untitled'}); 
    };

You array of single items should remain until you change state.

Upvotes: 1

Related Questions