So aktualisieren Sie automatisch ein Start- und Endseiten-Eingabefeld

Question

Ich habe eine Liste von Start- und Endseitenzahlen mit angularJS-Formularen. Was ich tun möchte, ist ... wenn ein Benutzer beispielsweise die Endseite als 4 in der ersten Zeile eingegeben hat, möchte ich, dass die Startseite der zweiten Zeile automatisch mit 5 (+1 des vorherigen Endes) aktualisiert wird Seite).

Ich verwende ein Objekt, das wie folgt aussieht:

$scope.pages = { 
    items: [{ 
      startNumber: 1, 
      endNumber: '' 
     }, 
     { 
      startNumber: '', 
      endNumber: '' 
     }, 
     { 
      startNumber: '', 
      endNumber: '' 
     }, 
     { 
      startNumber: '', 
      endNumber: '' 
     } 
    ] 
}; 

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"> 
</div> 

Funktion:

$scope.autoStartPageNumber = function(endPage) { 
    if (endPage.length) { 
     startNumber = endNumber + 1; 
    } 
}; 

Ich bin nicht sicher, ob ich verwende die Funktion korrekt oder wo die Funktion, um die Zahlen hinzuzufügen. Wenn irgendjemand etwas Ähnliches getan hat, dann wäre jede Hilfe großartig.

Answer 1

Sie können ng-change auf dem zweiten Eingabefeld verwenden und das Feld entsprechend aktualisieren. Sie können so etwas tun.

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

var myApp = angular.module('myApp',[]); 
 

 
//myApp.directive('myDirective', function() {}); 
 
//myApp.factory('myService', function() {}); 
 

 
function MyCtrl($scope) { 
 
    $scope.name = 'Superhero'; 
 
    $scope.pages = { 
 
      items:[ 
 
       { 
 
         startNumber:1, 
 
         endNumber:'' 
 
       }, 
 
       { 
 
         startNumber:'', 
 
         endNumber:'' 
 
       }, 
 
       { 
 
         startNumber:'', 
 
         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; 
 
} 
 

 

 
     }; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
<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>