javascript - 添加新行时如何自动更新起始页和结束页输入字段

我有重复使用angularJS形式的开始和结束页码的列表。当前，如果用户在第一行输入的结束页面为4，则第二行的开始页面将自动更新为5（上一结束页面的+1）。

我遇到的问题是....当我添加新的页码行时，由于未触发autoStartPageNumber函数，因此未生成起始页。所以我想做的就是在触发addRow函数时触发autoStartPageNumber函数。

HTML：

<div class="form-group col-sm-3" ng-repeat="file in pages.items">
        <label for="start">Pages </label>
        <input type="number" name="startPage" class="form-control" id="start" ng-model="file.startNumber">
        <label for="end"> - </label>
        <input type="number" name="endPage" class="form-control" id="end" ng-model="file.endNumber" ng-change="autoStartPageNumber($index)">
    </div>

    <div class="row">
        <div class="col-sm-2">
            <a href="#" ng-click="addRow()">Add another document</a>
        </div>
    </div>

控制器：

$scope.pages = {
            items:[
                {
                      startNumber:1,
                      endNumber:''
                },
                {
                      startNumber:'',
                      endNumber:''
                }
            ]
      };
   $scope.autoStartPageNumber = function (index) {
     if(index +1 < $scope.pages.items.length){
       $scope.pages.items[index+1].startNumber=$scope.pages.items[index].endNumber + 1;
     }
    };

    $scope.addRow = function() {
        $scope.pages.items.push({
            startNumber:'',
            endNumber:''
        });
      };

解
JSFIDDLE LINK

最佳答案

添加新行时，只需检查最新的items.endNumber即可：

 $scope.addRow = function() {
        $scope.pages.items.push({
            startNumber: $scope.pages.items[$scope.pages.items.length-1].endNumber + 1,
            endNumber:''
        });
      };