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

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

javascript jquery angularjs

Javascript 如何从上次结束时恢复计数器,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我使用计数器方法在表单中添加了一些输入字段，并保存了该表单。当我试图在表单中再次添加字段时，计数器从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'，函数

我使用计数器方法在表单中添加了一些输入字段，并保存了该表单。当我试图在表单中再次添加字段时，计数器从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'，函数（$scope，$compile）{
$scope.singleFields=[]；
var计数器=0；
$scope.addNew_SingleField=函数（索引）{
$scope.singleFields[counter]={single:'untitled'}；
var singlehtml='\n\
{{singleFields['+counter+'].single}}\n\
';
var single=$compile（singlehtml）（$scope）；
元素（document.getElementById（'drop'））.append（单个）；
++计数器；
};
$scope.selectSingle=函数（val）{
$scope.singleField=val；
$scope.showName=true；
};
});

单行文本
字段标签（？）


您的代码结构确实不正确。在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>

在更改状态之前，单个项目的数组应该保持不变。
您可以使用类似的方法在会话之间存储计数器值。替换var计数器=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;
    };
});

var-app=angular.module（'myapp'，['ngSanitize'，'myservicecmodule']）；
app.controller（'AddCtrl'，函数（$scope，$compile，counterService）{
$scope.singleFields=[]；
var counter=counterService.get（）；//从服务获取当前值
对于（变量i=0；i
你能发布一些代码吗？@SambhavGore oksure@Mytri我只使用了全局变量。。好的，我正在更新我的code@VijjuSena如果你发布代码，你会很快得到答案，这不是什么大问题。你必须更新模型值，或者调整数组的长度。计数器不是必需的。如果我使用ng repeat，我的进一步功能将无法正常工作。代码中的“myServiceModule”是什么，是应用程序名还是服务名？这只是一个新的模块名。您可以将工厂复制到现有模块中。或者，您可以在应用程序中包含此新模块。例如，var myApp=angular.module（'myApp'，['myservicecmodule']）；这意味着不必使用var counter=0；在我的代码里？必须添加“计数器命名工厂”代码的ur的？？我更新了我的答案，主要的变化将是读取初始值，然后更新值时，它的变化。因此，这样可以存储它，以防控制器重新加载。嗨，我尝试了你的代码，但我没有得到正确的结果。。你能检查一下这个plunkr链接并调整代码吗？我的代码中有任何错误。意味着必须替换你的代码，而不是使用var counter=0；对吗？在何处使用localStorage['counter']={value:}我尝试了你的代码，但没有得到结果，这是我的代码。你能在这个代码中进行调整吗？当你运行++counter
时，它不会更新本地存储值。更新值后，需要执行localStorage['counter']={value:5}。
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;
    };
});