如何循環動態地在Angular.js中添加字段並獲取數據並將其發送到服務器？

我有這樣的代碼添加輸入字段動態的HTML如何循環動態地在Angular.js中添加字段並獲取數據並將其發送到服務器？

<div ng-app="timeTable" ng-controller="addCoursesCtrl"> 
     <button class="btn btn-primary" ng-click="addNewCourse()">Add New Course</button><br/><br/> 
     <fieldset ng-repeat="choice in choices"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <select class="form-control"> 
         <option>Lab</option> 
         <option>Theory</option> 
        </select> 
       </div> 
       <div class="col-md-6"> 
        <input type="text" placeholder="Enter Course Name" name="" class="form-control" /> 
       </div> 
      </div> 
      <br/> 
     </fieldset> 
     <h2> 
      {{choice}} 
     </h2> 
    </div>

的JS

timeTable.controller("addCoursesCtrl", function ($scope) { 
    $scope.choices = [{id:'choice1'},{id:'choice2'}]; 
    $scope.addNewCourse = function() { 
     var newITemNo = $scope.choices.length + 1; 
     $scope.choices.push({ 'id': 'choice' + newITemNo }); 
    }; 
});

在你每次點擊addnewCourse按鈕時，我的控制器

，它增加了新選擇 - 到數組中，並在我的html我用ng-repeat來添加需要輸入，但我的問題如何獲取數據並將數組作爲對象我的prefrerd對象是數組 [{「Course」：value ..，「Type」：value。 ...}，{「Course」：value ..，「Type」：value ....}] 並以此形狀將其發送到服務器，所以偏好的方式如何，輸入字段的課程價值以及來自select的類型值。

來源

2015-04-03 theprogrammer_man

要發送到服務器的數據可以直接綁定到ng模型的視圖。

定義數據服務器的需求（最終做到這一點的服務）：

$scope.choices = [{id:'choice1', course:'', type:''},{id:'choice2', course:'', type:''}];

在視圖：

... 
<fieldset ng-repeat="choice in choices"> 
    ... 
    <input type="text" placeholder="Enter Course Name" name="" 
     ng-model="choice.course" 
     class="form-control" /> 
    ... 
    <select class="form-control" ng-model="choice.type"> 
     <option>Lab</option> 
     <option>Theory</option> 
    </select> 
    ...

轉換爲JSON發送到服務器：

var asJson = angular.toJson($scope.choices);

來源

2015-04-03 18:51:20 danh

您可以將一個ngModel添加到選擇和輸入。首先，創建一個範圍變量，一個空數組：

$scope.formData = [];

然後，在你的標記，在重複添加ng-model，並使用$index變量來跟蹤該數組：

<fieldset ng-repeat="choice in choices"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <select ng-model="formData[$index].Type" class="form-control"> 
       <option>Lab</option> 
       <option>Theory</option> 
      </select> 
     </div> 
     <div class="col-md-6"> 
      <input ng-model="formData[$index].Course" type="text" placeholder="Enter Course Name" name="" class="form-control" /> 
     </div> 
    </div> 
    <br/> 
</fieldset>

這裏是一個jsFiddle

來源

2015-04-03 19:03:50 Corey

如何循環動態地在Angular.js中添加字段並獲取數據並將其發送到服務器？

回答

相關問題