Question

我使用计数器方法在表单中添加了一些输入字段，然后保存了该表单。当我尝试再次将字段添加到表单中时，计数器从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>

Answer 1

您可以使用类似local storage的内容，以便在会话之间存储计数器值。将var counter = 0;替换为

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

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

这可以在打开/关闭页面后起作用。如果您正在讨论维护计数器超出范围被破坏（例如在页面导航中），那么您可以使用angular service，尽管在这种情况下使用localStorage也可以。

Answer 2

如果要保存计数器值，使其从重新加载的最后一个值继续，您可以使用一个简单的服务来保存该值。如果要将此值保留在本地存储或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;
    };
});

Answer 3

您的代码结构确实不正确。在Angular中，您并没有真正操纵控制器代码中的DOM。真的不需要你的柜台。只需每次单击都可以将数据推入数组，然后将引用传递给repeat语句中的元素。

在模板中，您可以使用ng-repeat指令：

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

在更改状态之前，您应保留单个项目数组。

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

3 个答案: