Contenu du formulaire dynamique Angularjs
swaroop sg
Voici ma vue angulaire,
<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 />
qui ajoute un nouveau champ de texte chaque fois que je clique sur le bouton addSkipColumn.
voici mon code js :
$scope.config.skipColumns = [];
$scope.addNewSkipColumn = function (skipColumn) {
if($scope.config.skipColumns==null){
$scope.config.skipColumns=[];
}
$scope.config.skipColumns.push([]);
}
le problème est donc que lorsque j'affiche ou vois la structure de $scope.config.skipColumns, cela donne la sortie suivante :
{
skipColumns:[["content of textfield1"],["content of textfield1"]..]
}
Mais ce dont j'ai besoin, c'est
{
skipColumns:["content of textfield1","content of textfield1",..]
}
s'il vous plaît aidez-moi. ("contenu du champ de texte" fait référence aux données du formulaire)
tanmay
Ce dont vous avez besoin ici, c'est de changer ce que vous poussez dans le config.skipColumnstableau. Comme ça:
$scope.addNewSkipColumn = function(skipColumn) {
$scope.config.skipColumns.push("");
}
Et, ng-repeatserait comme:
<fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
<input type="text" ng-model="config.skipColumns[$index]" />
</fieldset>
( pourquoi n'ai-je pas utilisé skipColumndirectement dans le ng-model? )
Voici un exemple de travail :
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>