如何从上次结束恢复计数器

我使用计数器方法在表单中添加了一些输入字段，并保存了该表单。当我尝试再次向表单添加字段时，计数器从 0 开始。

例如，我添加了 5 个输入字段。这些输入字段模型值采用 0,1,2,3,4,5。当我在保存表单后开始添加字段时，计数器再次从开始，这意味着结果是这样的：{0,1,2,3,4,5,0,1,2,-----}。

如何从最后结束的数字开始计数器？

更新

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>

您可以使用本地存储之类的东西来存储会话之间的计数器值。将var counter = 0;替换为类似

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

请注意，应将计数器另存为对象的属性，例如localStorage['counter'] = {value: 5}否则索引将被强制转换为字符串。

这将在打开/关闭页面后工作。如果您谈论的是维护计数器超过被销毁的范围（例如在页面导航上），那么您可以使用角度服务，尽管在这种情况下使用localStorage也可以工作。

如果要

保存计数器值，以便它在重新加载时从最后一个值继续，则可以使用简单的服务来保存该值。如果要在本地存储或 cookie 中保留此值，可以将函数扩展到该值。

    angular.
    module('myServiceModule', []).     
    factory('counterService', [function() {
       var _counter = 0;
       function _get() {        
                return _counter;            
        }
       function _set(value) {
               _counter = value;
       }

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

对控制器的主要更改是从服务中获取计数器起始值。然后使用更改的计数器值更新服务。

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;
    };
});

你的代码结构确实不正确。在 Angular 中，你并没有真正在控制器代码中操作 DOM。您的计数器真的不需要。只需在每次单击时推送到数组，然后在重复语句中传递对元素的引用。

在您的模板中，您可以使用 ng 重复指令：

<!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>

然后只需简化添加新功能即可。

$scope.addNew_SingleField = function (index) {
        $scope.singleFields.push({single: 'untitled'}); 
    };

单个项目的数组应保留，直到更改状态。

相关内容

最新更新

热门标签：