javascript - Angularjs dynamic form contents -
here angular view,
<label class="control-label">skipcolumns:</label> <br /> <fieldset ng-repeat="skipcolumn in config.skipcolumns track $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 click addskipcolumn button.
here js code:
$scope.config.skipcolumns = []; $scope.addnewskipcolumn = function (skipcolumn) { if($scope.config.skipcolumns==null){ $scope.config.skipcolumns=[]; } $scope.config.skipcolumns.push([]); } so problem when display or see structure of $scope.config.skipcolumns, gives following output:
{ skipcolumns:[["content of textfield1"],["content of textfield1"]..] } but need is,`
{ skipcolumns:["content of textfield1","content of textfield1",..] } please me.("content of textfield" resfers form data)
what need here change pushing in config.skipcolumns array. this:
$scope.addnewskipcolumn = function(skipcolumn) { $scope.config.skipcolumns.push(""); } and, ng-repeat like:
<fieldset ng-repeat="skipcolumn in config.skipcolumns track $index"> <input type="text" ng-model="config.skipcolumns[$index]" /> </fieldset> (why did not use skipcolumn directly in 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 $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>
Comments
Post a Comment