在angularjs中獲取具有相同名稱的表單的所有值

Question

我有一個從其中包含兩個文本框一個用於獲取電子郵件的名稱和其他的一個按鈕添加新行添加這兩個文本框我試圖獲得通過AngularJS但我是新來的角

這裏姓名和電子郵件中的所有值是我的代碼：

JS代碼

function addrow() { 
    var table = document.getElementById("emp"); 
    var row = table.insertRow(2); 
    var name = row.insertCell(0); 
    var email = row.insertCell(1); 
    name.innerHTML = "<input id='Name' type='text' value='' name='ename' ng-model='data.ename'>"; 
    email.innerHTML = "<input type='text' value='' name='Email' id='email' ng-model='data.email'>"; 
} 

HTML

<form name="employees" ng-submit="emp()"> 
    <table id="emp"> 
     <tr> 
      <td>Employee Name 
      </td> 
      <td>Employee Email 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="text" id="Name" name="ename" ng-model="data.ename" /> 
      </td> 
      <td> 
       <input type="email" id="email" name="email" ng-model="data.email" /> 
      </td> 
     </tr> 
    </table> 
<button class="btn btn-primary" onclick="addrow();">Add new</button> 
     <input type="submit" class="btn" /> 
    </form> 

AngularJS CODE

var model1Controller = ["$scope", "$http", function ($scope, $http) { 
$scope.data = []; 

$scope.emp = function() { 
    alert($scope.data.ename); 
    } 
}] 

Answer 1

廢你addrow()功能的文件，將其移動到您的控制器，並使用ng-repeat濾鏡代替。 ngRepeatDocs。 Angular在這種情況下的全部目的是爲你做元素和DOM綁定，所以你不必編寫一個函數來刮取值並插入html。也就是說，我不知道你的提交是否打算在表單中添加一個人，或者如果提交應該提交所有表單數據，並且你有另一個按鈕（你提到了一個按鈕，但是我不'在你的代碼中看到一個）將員工添加到表單中。直到你可以清除了一下，下面是如何顯示在數據模型中的每一位員工，並使用提交操作將其添加到窗體指導：

<form name="employees" ng-submit="addrow()" ng-controller="model1Ctrl"> 
<table id="emp"> 
    <tr ng-repeat="emp in data"> 
     <td> {{ emp.ename }} 
     </td> 
     <td>{{ emp.email }} 
     </td> 
    </tr> 
    <tr > 
     <td> 
      <input type="text" id="Name" name="ename" ng-model="ename" /> 
     </td> 
     <td> 
      <input type="email" id="email" name="email" ng-model="email" /> 
     </td> 
    </tr> 
</table> 

控制器：

var model1Ctrl = ['$http','$scope',function($http,$scope){ 

    $scope.data = []; 

    $scope.addrow = function() { 
     var newEmp = { 
      ename: $scope.ename, 
      email: $scope.email 
      } 

     $scope.data.push(newEmp); //adds the new employee as an object into your data set 
     // which ng-repeat will automatically know about, and display in your table 

     //clear the scope of your inputs so they can be used again 
     $scope.ename = ''; 
     $scope.email = ''; 

    } 
}] 

Answer 2

如果您不需要所有條目都是可編輯的，則可以使用@ Brian的解決方案。如果你想所有這些編輯只需使用ng-repeat來包裝輸入：

<form name="employees" ng-submit="emp()"> 
    <table id="emp"> 
     <tr> 
      <td>Employee Name</td> 
      <td>Employee Email</td> 
     </tr> 
     <tr ng-repeat="emp in employees"> 
      <td><input ng-model="emp.ename" /></td> 
      <td><input type="email" ng-model="emp.email" /></td> 
     </tr> 
    </table> 
    <button class="btn btn-primary" ng-click="addrow()">Add new</button> 
    <input type="submit" class="btn" /> 
</form> 

 

var model1Controller = ["$scope", "$http", function ($scope, $http) { 
    var employees = $scope.employees = []; 
    $scope.addrow = function() { employees.push({ /* don't need anything here */ }); }; 
    $scope.emp = function() { 
     console.log(employees); 
    } 
};