Question

使用ng-repeat创建的表中有多行。每行都有一个下拉列表。我想在下拉列表中获取所选值，并使用JavaScript或JQuery单击“下一步”按钮，以字符串格式将该值与行中的其他对应值附加。例如：“one，B：two，B：three，A：four：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] }

然后使用以下

更新控制器

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

Answer 2

切换到对象。

$scope.myData = {
    one: {
        id: 'one',
        value: null
    }, 
    two: {
        id: 'two',
        value: null
    }, 
    three: {
        id: 'three',
        value: null
    }, 
    four: {
        id: 'four',
        value: null
    }
}

在您的HTML中，为您的选择

添加ng-model

<select ng-model="data.value">
    <!-- your options, because I'm lazy -->
</select>

您将获得一个包含您想要的所有对象。在我看来，我发现使用对象而不是数组更容易。

在表的每一行中找到下拉列表的选定值

2 个答案: