Angularjs dynamic form contents

Question

Here is my angular view,

<label class="control-label">skipColumns:</label>
  <br />
<fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
<input type="text" class="form-control" ng-model="skipColumn[0]" /><br />
</fieldset>
<button class="btn btn-default" ng-click="addNewSkipColumn(skipColumn)">Add SkipColumn</button>
<br />

which adds new textfield every time i click addSkipColumn button.

here is my js code:

$scope.config.skipColumns = [];
    $scope.addNewSkipColumn = function (skipColumn) {
        if($scope.config.skipColumns==null){
            $scope.config.skipColumns=[];
        }
        $scope.config.skipColumns.push([]);

    }

so the problem is when I display or see the structure of $scope.config.skipColumns, It gives the following output:

{
 skipColumns:[["content of textfield1"],["content of textfield1"]..]

 }

But what I need is,`

{
 skipColumns:["content of textfield1","content of textfield1",..]

 }

please help me.("content of textfield" resfers to form data)

score 1 · Accepted Answer · edited May 23 '17 at 12:02

What you need here is to change what you are pushing in config.skipColumns array. Like this:

$scope.addNewSkipColumn = function(skipColumn) {
    $scope.config.skipColumns.push("");
}

And, ng-repeat would be like:

<fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
    <input type="text" ng-model="config.skipColumns[$index]" />
</fieldset>

(why did I not use skipColumn directly in the ng-model?)

Here's working example:

angular.module("myApp", [])
  .controller("ctrl", function($scope) {
    $scope.config = {};

    $scope.config.skipColumns = [];
    $scope.addNewSkipColumn = function(skipColumn) {
      $scope.config.skipColumns.push("");
    }
  })

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="ctrl">
  <label class="control-label">skipColumns:</label>
  <br />
  <fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
    <input type="text" class="form-control" ng-model="config.skipColumns[$index]" />
  </fieldset>
  <button class="btn btn-default" ng-click="addNewSkipColumn()">Add SkipColumn</button>
  <br />
  <br>
  <pre>{{config.skipColumns}}</pre>
</body>

</html>

score 0 · Answer 2 · answered Apr 07 '17 at 05:26

See this... Just push value instead of array.

var app = angular.module('angularjs', []);

  app.controller('MainCtrl', function($scope) {

  $scope.choices = ['choice1'];
  
  $scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length+1;
    $scope.choices.push('choice'+newItemNo);
  };
    
  $scope.removeChoice = function() {
    var lastItem = $scope.choices.length-1;
    $scope.choices.splice(lastItem);
  };
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div ng-app="angularjs" ng-controller="MainCtrl">
   <fieldset  data-ng-repeat="choice in choices">
      <select>
         <option>Mobile</option>
         <option>Office</option>
         <option>Home</option>
      </select>
      <input type="text" ng-model="choice.name" name="" placeholder="Enter mobile number">
      <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
   </fieldset>
   <button class="addfields" ng-click="addNewChoice()">Add fields</button>
       
   <div id="choicesDisplay">
      {{ choices }}
   </div>
</div>

Thank you for the response. – swaroop sg Apr 09 '17 at 02:01 — swaroop sg, Apr 09 '17 at 02:01

Angularjs dynamic form contents

2 Answers2