在angularjs中提交动态表单答案

【问题标题】：Submitting a dynamic form in angularjs在angularjs中提交动态表单
【发布时间】：2016-01-09 13:12:13
【问题描述】：

我正在尝试创建一个函数，在该函数中我从一个列出产品的数组中构建一个列。然后是第二列，其中包含我要与第二列配对的选项的选择列表。

最终结果将是对服务器的 ajax 调用，该服务器将插入每个匹配的对。

我在 JS Fiddl 上创建了一个示例：https://jsfiddle.net/wnzj6wda/2/

代码如下：

<html>
<header>
    <title>myTittle</title>
</header>
<body ng-app='myApp' ng-controller='myController'>
    <div class="col-md-10 col-md-offset-1">
        <div>
            <form>
                <table class="table  table-striped">
                    <thead>
                        <th>From File</th>
                        <th>Map To</th>
                    </thead>
                    <tr class="selector-row" ng-repeat="(key,value) in List1">
                        <td><span id="myspan">{{value}}</span>

                        </td>
                        <td style="padding:10px;">
                            <select name="repeatSelect" id="repeatSelect" ng-model="data" class="form-control">
                                <option ng-repeat="(key,value) in Match" value="{{value}}">{{value}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <button ng-click="SubmitMatched()">Show matched</button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>
<script>
    var app = angular.module('myApp', [])
    app.controller('myController', ['$scope', function($scope) {

        $scope.List1 = ['product1', 'product2', 'product3', 'product4', 'product5'];
        $scope.Match = ['match1', 'match2', 'match3', 'match4', 'match5'];

        $scope.SubmitMatched = function() {
            //I want to be able to submit results to be added to a database, where I can pass the coloms that match to the selected.
            //Example:
            // results = [{'product1':'match4','product2':'match5','product3':'match1','product4':'match3','product5':'match2'}]
        }

    }])
</script>

</html>

【问题讨论】：

标签： angularjs forms angularjs-scope angularjs-ng-repeat

【解决方案1】：

这是更新后的演示 https://jsfiddle.net/wnzj6wda/3/ 您必须使 ng-model 动态化，以便最终获得带有数据的对象在js中

 $scope.data ={};

在html中

 <select name="repeatSelect" id="repeatSelect" ng-model="data[value]" class="form-control">
 <option ng-repeat="(key,value) in Match" value="{{value}}">{{value}}</option>
 </select>

希望对你有帮助

【讨论】：

嗨 Jayant，我想做一个多维数组，如下所示：“MemberOrg”：{“-Type”：“Facility”，“NetworkOrg”：{“sources”：{“Source ": { "-Name": "Network Org", "-order": "1" } } }.
这种情况需要添加两个ng-repeat