Question

我有一个使用angularJS表单的开始和结束页码列表。我想要做的是......例如，如果用户在第一行输入结束页面为4，那么我希望第二行的起始页面自动更新为5（前一个结束的+1）页）。

我正在使用一个看起来像这样的对象：

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

功能：

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

我不确定我是否正确使用该功能或在哪里放置功能来添加数字。如果有人做过类似的事情......任何帮助都会很棒

Answer 1

您可以在第二个输入字段上使用ng-change并更新字段。你可以做这样的事情。

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

如何自动更新开始和结束页面输入字段

1 个答案: