如何在添加新行时自动更新开始和结束页面输入字段

时间:2017-07-18 14:59:38

标签: javascript angularjs forms

我有一个使用angularJS表单的开始和结束页码列表,我正在重复。目前,如果用户已在第一行上输入结束页面为4,则第二行的起始页面将自动更新为5(前一页面的+1)。

我遇到的问题是......当我添加一行新的页码时,不会生成起始页,因为autoStartPageNumber函数没有被触发。所以我想要做的是在触发addRow函数时触发autoStartPageNumber函数。

HTML:

    static void Main(string[] args)
    {
        List<string> MyStringList = new List<string>()
        {
            "Bammler Tokyo SA GOV",
            "Zurich Bammler GOV",
            "London Bammler 12 GOV",
            "New Bammler York GOV"
        };

        string shortest = MyStringList.OrderBy(s => s.Length).First();
        IEnumerable<string> shortestSubstrings = getAllSubstrings(shortest).OrderByDescending(s => s.Length);
        var other = MyStringList.Where(s => s != shortest).ToArray();
        string longestCommonIntersection = string.Empty;
        foreach (string subStr in shortestSubstrings)
        {
            bool allContains = other.All(s => s.Contains(subStr));
            if (allContains)
            {
                longestCommonIntersection = subStr;
                break;
            }
        }
    }

    public static IEnumerable<string> getAllSubstrings(string word)
    {
        return from charIndex1 in Enumerable.Range(0, word.Length)
               from charIndex2 in Enumerable.Range(0, word.Length - charIndex1 + 1)
               where charIndex2 >= 2
               select word.Substring(charIndex1, charIndex2);
    }

控制器:

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

溶液 JSFIDDLE LINK

2 个答案:

答案 0 :(得分:1)

添加新行时,只需检查最新的items.endNumber:

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

答案 1 :(得分:0)

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

  };

只需将之前的endNumber分配给startNumber