将增量项目推入Angularjs中的数组

Question

http://plnkr.co/edit/NDTgTaTO1xT7bLS1FALN?p=preview

<button ng-click="addRow()">add row</button>

<div ng-repeat="row in rows">
<input type="text" placeholder="name"><input type="tel" placeholder="tel">
</div>

我想推送新行并保存所有字段，但是现在我被困于添加新行。 如何知道当前的行数并递增以推入数组？

Answer 1

在控制器“ Ctrl”内移动功能。

在脚本中：

function Ctrl($scope) {
    $scope.result = "something";
    $scope.rows = ['1'];

    $scope.addRow = function(){
        if ($scope.rows.length < 8) {
            $scope.rows.push($scope.rows.length + 1);
        }
    }

    $scope.saveAll = function(){
    //  $scope.result = 'something';
    }
}

Answer 2

看一下我创建的这个示例，它允许您为Telephone和Text条目最多生成八个唯一的输入字段。

 var app = angular.module("MyApp", []); app.controller("MyCtrl", function($scope) { $scope.rows = []; var Row = function(tel, text) { // Private data var private = { tel: tel, text: text } // Expose public API return { get: function( prop ) { if ( private.hasOwnProperty( prop ) ) { return private[ prop ]; } } } }; $scope.addRow = function(){ if($scope.rows.length < 8){ var newItemNum = $scope.rows.length + 1; var row = new Row('item' + newItemNum, 'item' + newItemNum); $scope.rows.push(row); } }; $scope.saveAll = function(){ // $scope.result = 'something'; }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="MyApp"> <div ng-controller="MyCtrl"> <h2>Setting</h2> <button ng-click="addRow()">Add Row</button> <br /> <div ng-repeat="row in rows"> <input type="text" placeholder="Text" ng-model="row.textModel" > <input type="tel" placeholder="Phone" ng-model="row.telModel" > </div> <br /> {{rows}} </div> </div>