толчок прибавка элемент в массив в 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

Посмотрите на этот пример я создал, который позволяет генерировать до восьми уникальных полей ввода для 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>

Answer 2

Перемещение функций внутри контроллера «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'; 
    } 
}