current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

I want insert dynamic fields into a form.

For example: I have a field list like:

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

In jQuery I only need serializate all form and send it, like $('#myForm').serialize().

But, I don't know how can I do this in angular.

Somebody have some idea?

In angular i only know use the directive ng-mode and I can't do that: ng-mode="myform.name[]"

share|improve this question
    
i believe that you are looking for ng-repet here is official ng-repet examle plnkr.co/edit/uHDMWdO7gR3qBRmDotiU?p=preview – Nino Mirza Mušić 19 hours ago
up vote 0 down vote

Angular is a data-model oriented framework. You can bind your model (ej: array of value) to view trhought ng-model and ng-repeat and so submit directly your binded model

share|improve this answer
up vote 0 down vote

Try something like this:

<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>

Your angular controller could look like this:

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);
    }
}]);
share|improve this answer
    
This example no run to me couse i don't know how many field 'name' could I have. Could be 4 or 7 fields, that depend to other variable. – wilo087 15 hours ago
up vote 0 down vote

I've found the solution and is to here:

/* ------------------------------------------------------- 
* Source: http://www.shanidkv.com/blog/angularjs-adding-form-fields-dynamically
* Author: Muhammed Shanid [email protected]
**********Thank's very mush Muhammed **********
* Hacked By: Wilowayne De La Cruz [email protected]
---------------------------------------------------------*/

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);
  };
  
});
<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>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.