Добавление строки AngularJS

Question

Функция:

angular.module('formTerm', []) 
 
    .controller('MainController', ['$scope', 
 
     function($scope) { 
 

 
     $scope.rows = [{ 
 
      explanation: '', 
 
      example: '' 
 
     }]; 
 
     $scope.counter = 5; 
 
     $scope.addRow = function() { 
 
      $scope.rows.push({ 
 
      explanation: '', 
 
      example: '' 
 
      }); 
 
      $scope.counter++; 
 
     }

HTML:

<span class="add btn btn-primary" ng-click="addRow()">Add</span> 
 
<div class="template term-row" ng-repeat="rows in rows"> 
 
    <div class="col-md-4"> 
 
    <textarea class="form-control" rows="2" id="explanation" placeholder="Explanation" name="explanation" ng-model="formData.rows.explanation"></textarea> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <textarea class="form-control" rows="2" id="example" placeholder="Example" name="example" ng-model="formData.rows.example"></textarea> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    <br /> 
 
</div>

Кто-то пожалуйста, помогите. Строка была добавлена, но я хочу его другим именем элемента, такие как «explanation1 @ explanation2 @ explanation3» и т.д.

Пожалуйста, посмотрите на the sample

Answer 1

Вы назначены свои модели входов к переменным formData.rows.explanation и formData.rows.example - так просто поместите их в качестве значения.

Это должно сделать трюк:

$scope.counter = 5; 
$scope.addRow = function() { 
    $scope.rows.push({ 
     explanation: $scope.formData.rows.explanation, 
     example: $scope.formData.rows.example 
    }); 
    $scope.counter++; 
} 

Answer 2

Использование $index, С $ индекс начинается с 0, мы должны добавить +1 к нему.

<textarea class="form-control" rows="2" id="explanation{{$index + 1}}" placeholder="Explanation" name="explanation{{$index + 1}}" ng-model="formData.rows.explanation"></textarea>