2014-10-10 50 views
-1

功能:添加一行AngularJS

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 @說明2 @ explanation3」等

請看看the sample

+0

下次試着寫一個更具描述性的問題。在寫這篇評論的時候,有3個答案和每個解決不同問題的嘗試。 – 2014-10-10 10:55:35

+0

對不起。請看示例 – 2014-10-10 11:18:37

回答

0

你分配你的輸入模型變量formData.rows.explanationformData.rows.example - 所以簡單地把它們作爲價值。

這應該做的伎倆:

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

它不起作用。添加了行,但是當我將解釋字段的輸入顯示給每一行時,同樣發生在示例字段上。 – 2014-10-10 10:54:08

+0

下面是您的編輯的工作版本:http://jsfiddle.net/HB7LU/7205/ – 2014-10-10 11:39:50

+0

非常感謝。 – 2014-10-10 12:02:41

0

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