javascript - 在表的每一行中查找下拉菜单的选定值

Question

使用ng-repeat创建的表中有多行。每行都有一个下拉列表。我想在下拉列表中获取选定的值，并在单击“下一步”按钮时使用 JavaScript 或 JQuery 以字符串格式将该值与行中的其他相应值附加在一起。例如:“一，B:二，B:三，A:四:C”(在此示例中，假设选择 B 作为第一行的下拉列表，其他行的逻辑类似)

下面是 HTML 片段:

<div class="mainDiv" ng-controller="myController">                                          
    <div class="div1">
        <table class="table myTable">
            <thead>
                <tr>
                    <th>
                        <center>serial</center>
                    </th>
                    <th>
                        <center>data</center>
                    </th>
                    <th>
                        <center>aplhabet</center>
                    </th>
                </tr>
            </thead>
            <tbody class="myTableBody">
                <tr ng-repeat="data in myData" id="{{$parent.$id+'-'+$index}}">
                    <td>{{$index + 1}}</td>
                    <td>{{data}}</td>
                    <td>
                        <select>
                            <option value="Select">-- Select --</option>
                            <option value="A">A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="div2">
        <button type="button" class="btn btn-md btn-primary btnNext">Next</button>
    </div>
</div>

下面是 angularJS 部分:

myApp.controller('myController', function ($scope) {
    $scope.myData = ["one","two","three","four"];
});

Answer 1

添加ng-model={ selectData[data] }

然后使用以下内容更新 Controller

$scope.selectData = {}
getResults= function() {
  var returnData = $scope.myData.map(function(data) {
    return data + ',' + $scope.selectData[data];
  });
  return returnData.join(':');
};