Question

我想将动态字段插入表单。

例如：我有一个字段列表，如：

<input type="text" name="names[]" class="name-1">
<input type="text" name="names[]"  class="name-2">
<input type="text" name="names[]"  class="name-1">

在jQuery中，我只需要序列化所有表单并发送它，如$('#myForm').serialize().

但是，我不知道如何才能有角度地做到这一点。

有人有点想法吗？

在角度我只知道使用指令ng-mode而我不能这样做：ng-mode="myform.name[]"

Answer 1

我找到了解决方案，就在这里：

＆＃13;

/* ------------------------------------------------------- 
* Source: http://www.shanidkv.com/blog/angularjs-adding-form-fields-dynamically
* Author: Muhammed Shanid shanidkannur@gmail.com
**********Thank's very mush Muhammed **********
* Hacked By: Wilowayne De La Cruz wilo0087@gmail.com
---------------------------------------------------------*/

var app = angular.module('angularjs-starter', []);

  app.controller('MainCtrl', function($scope) {

  $scope.fields = [{name: 'employed-name-1'}, {name: 'employed-name-2'}];
  
  $scope.addNewChoice = function() {
    var newItemNo = $scope.fields.length + 1;
    $scope.fields.push({'name':'employed-name-'+newItemNo});
  };
    
  $scope.removeChoice = function() {
    var lastItem = $scope.fields.length-1;
    $scope.fields.splice(lastItem);
  };
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
   <fieldset  data-ng-repeat="field in fields">     
      <input type="text" ng-model="field.value" name="" placeholder="Enter employe name">
     
      <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
   </fieldset>
   <button class="addfields" ng-click="addNewChoice()">Add fields</button>
       
   <div id="choicesDisplay">
      {{ fields }}
   </div>
</div>

＆＃13;

Answer 2

Angular是面向数据模型的框架。您可以绑定模型（ej：值数组）以查看trhought ng-model和ng-repeat，然后直接提交绑定模型

Answer 3

尝试这样的事情：

<form ng-submit="submitMyForm()">
    <div class="form-group">
        <label class="control-label ">Input1</label>
        <input class="form-control" type="text" name="input1" ng-model="input1"/>
    </div>
    <div class="form-group">
        <label class="control-label ">Input2</label>
        <input class="form-control" type="text" name="input2" ng-model="input2"/>
    </div>
</form>

您的角度控制器可能如下所示：

app.controller('MyCtrl', ['$scope', function MyController ($scope) {

    $scope.input1 = 'Pre-set value of input 1';
    $scope.input2 = 'Pre-set value of input 2';

    $submitMyForm = function()
    {
        console.log('input1 value: ' + $scope.input1);
        console.log('input2 value: ' + $scope.input2);
    }
}]);

如何使用angularJS在表单字段中发送数组

3 个答案: