AngularJS动态表单内容
[英]Angularjs dynamic form contents
问题描述
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. 每当我单击addSkipColumn按钮时，都会添加新的文本字段。
here is my js code: 这是我的js代码：
$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: 所以问题是当我显示或看到$ scope.config.skipColumns的结构时，它给出以下输出：
{
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) 请帮助我。（“文本字段的内容”恢复为表格数据）
2 个解决方案
解决方案1
1 已采纳 2017-04-07 05:27:05
What you need here is to change what you are pushing in config.skipColumns array. 您需要在此处更改要在config.skipColumns数组中推送的内容。 Like this: 像这样：
$scope.addNewSkipColumn = function(skipColumn) {
$scope.config.skipColumns.push("");
}
And, ng-repeat would be like: 并且， ng-repeat将像：
<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 ? ) （ 为什么我不直接在ng-model使用skipColumn ？ ）
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>
解决方案2
0 2017-04-07 05:26:56
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.