在angularjs中提交动态表单

时间:2015-10-12 06:37:06

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

我正在尝试创建一个函数,我从列出产品的数组中构建一个列。然后是第二列,其中包含我想要将第二列与。

配对的选项列表

最终结果将是对将插入每个匹配对的服务器的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>

1 个答案:

答案 0 :(得分:0)

以下是更新的演示https://jsfiddle.net/wnzj6wda/3/ 你必须使ng-model动态化,这样你最终才能获得数据为的对象 在js

 $scope.data ={};

in 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>

希望这会对你有所帮助