具有多个动态选择框angularjs [英] Having multiple dynamic select boxes angularjs
问题描述
我使用
到目前为止,这个功能和显示都正确。但是,我不知道如何捕获我的 processImport()
函数中的数据。
绑定,但由于用户可以从选择框中添加/删除属性,因此无法预构建选择框。因为每个csv可以有不同数量的列,我需要重复每个列。
有关如何捕获这里提交的数据的任何建议?
因此,对于那些努力工作的人来说,这真的不是那么复杂。是的,我知道我现在在说,但是当你看到的解决方案,这很简单。
所以我有一个这样的对象:
var $ scope.rows = {
'header':帐户代码,
'header_safe':帐户代码,
'options':[Ignore,Cellphone Number,First Name,Full Name,Last Name,Title,Add Attribute],
'值:WELG01,ABDO01,ABOO01,ABOO2,ABOO02,ABOU01,ABRA03,ABRA01,ABRA02,ACKE04
},{
'header':客户名称
'header_safe': Customer Name
'options':[Ignore,Cellphone Number,First Name,Full Name,Last Name,Title,Add Attribute],
'values':,Abdool,Aboo,Aboobaker,Aboobaker,Abouchabki,Abraham Thato,Abrahams,Abrams,Ackerman Rulaine
}
其中,如果你看到上面的图片,你会认为我的问题中的图像显示什么。要让这些下拉列表工作,这是我的HTML看起来像:
< table class =table table-hover ;
< tr>
< th ng-show =has_headerclass =col-md-4>标题< / th>
< th class =col-md-4>属性< / th>
< th class =col-md-4>值示例< / th>
< / tr>
< tr ng-repeat =row in rows>
< td ng-show =has_header> {{row.header}}< / td>
< td>
< select class =form-controlng-model =select [row.header_safe]ng-options =option for row.options>< / select&
< / td>
< td> {{row.values}}< / td>
< / tr>
< / table>
然后,在我的表单提交,我只有一个 processImport / code>函数。该函数如下所示:
$ scope.processImport = function(){
console.log选择);
}
并且捕获我的所有数据。
可以使用更清晰的示例此处。感谢原作者,因为他完全回答了我的问题。
I built a csv contact importer using Papaparse. The site runs on angular.
This is my form:
<div ng-show="import_file_selected">
<form ng-submit="processImport()" name="importForm">
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th ng-show="has_header" class="col-md-4">Header</th>
<th class="col-md-4">Attribute</th>
<th class="col-md-4">Value Sample</th>
</tr>
<tr ng-repeat="row in rows">
<td ng-show="has_header">{{row.header}}</td>
<td>
<select class="form-control" name="{{row.header}}">
<option value="">Ignore</option>
<option ng-repeat="attribute in attributes" value="{{attribute.key}}">{{attribute.val}}</option>
<option value="add">Add Attribute</option>
</select>
</td>
<td>{{row.values}}</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group col-md-offset-3">
<button class="btn btn-primary btn-block" type="submit">Save Import</button>
</div>
</div>
</form>
</div>
The HTML gives this result:
So far, this all functions and displays correctly. However, I have no idea how to capture the data in my processImport()
function.
I thought of using binding, but since a user can add/remove attributes from the select box, I can't pre-build the select box. And since each csv can have a different number of columns, I need to repeat with each column there is.
Any suggestions on how I can capture the data submitted here? Please let me know if I should add anything else.
So for those struggling with something like this, it's really not that complex. Yes, I know I'm saying that now, but when you see the solution, it's pretty simple.
So I have an object like this:
var $scope.rows = {
'header': "Account Code",
'header_safe': "Account Code",
'options': ["Ignore", "Cellphone Number", "First Name", "Full Name", "Last Name", "Title","Add Attribute"],
'values: "WELG01, ABDO01, ABOO01, ABOO2, ABOO02, ABOU01, ABRA03, ABRA01, ABRA02, ACKE04"
},{
'header': "Customer Name"
'header_safe': "Customer Name"
'options': ["Ignore", "Cellphone Number", "First Name", "Full Name", "Last Name", "Title","Add Attribute"],
'values': ", Abdool, Aboo, Aboobaker, Aboobaker, Abouchabki, Abraham Thato, Abrahams, Abrams, Ackerman Rulaine"
}
Which, if you see the image above you'd recognise as what is displayed in the image in my question. To get those dropdowns working, this is what my HTML looks like:
<table class="table table-hover">
<tr>
<th ng-show="has_header" class="col-md-4">Header</th>
<th class="col-md-4">Attribute</th>
<th class="col-md-4">Value Sample</th>
</tr>
<tr ng-repeat="row in rows">
<td ng-show="has_header">{{row.header}}</td>
<td>
<select class="form-control" ng-model="select[row.header_safe]" ng-options="option for option in row.options"></select>
</td>
<td>{{row.values}}</td>
</tr>
</table>
Then, on my form submit, I just have a processImport()
function. That function looks like this:
$scope.processImport = function() {
console.log($scope.select);
}
And that catches all my data.
A cleaner example is available here. Thanks to the original author, as he definitively answered my question.
这篇关于具有多个动态选择框angularjs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!