Javascript 将复选框和下拉列表的值传递到同一数组中

我目前正在创建一个表单，允许用户根据选择的功能向其集合添加新功能。此表单的结构是由复选框和下拉列表组成的表。复选框允许用户选择他们希望添加的功能，下拉列表允许用户选择他们对该功能的专业水平

以下是表单的HTML:

<form class="listOfCaps">
    <table>        
        <tbody>
            <tr ng-repeat-start="cap in capsarr"></tr>
            <tr ng-repeat-start="capname in filteredCaps track by capname.cid"></tr>
                <td>
                    <input type="checkbox" name="selectedCaps[]" value="{{capname}}" ng-model="capname.selected" /> <span>{{capname.capname}}</span>
                </td>
                <td>
                    <span class="custom-dropdown custom-dropdown--white">
                        <select 
                            class="custom-dropdown__select custom-dropdown__select--white"  
                            name = "selectedExp[]" 
                            ng-options = "exp.id as exp.level for exp in expertise" 
                            ng-model = "exp">
                            <option value="">Select One</option> 
                            </select>
                        </span>
                </td>
            <tr ng-repeat-end="capname in cap.capabilities"></tr>
            <tr ng-repeat-end="cap in capsarr"></tr>
        </tbody>
    </table>
</form>

$scope.expertise = [
    {id: '1', level: 'Certified'},
    {id: '2', level: 'Knowledgable'},
    {id: '3', level: 'Interested'}
];

$scope.selection = [];

$scope.$watch('filteredCaps | filter:{selected:true}', function (newValues) {
    $scope.selection = newValues.map(function (capname) {
        return {"capname" : capname.capname, "cid": capname.cid};
    });
}, true);

注意：filteredCaps是存储在$scope中的数组。filteredCaps来自上一个函数。此数组包含由功能名称和id组成的对象

---

如果不需要是数组，可以将选择设置为对象：

$scope.selection = {};

然后在你看来：

<input type="checkbox" ... ng-model="selection[capname]" ... />
<select ... ng-model = "selection[capname + '_Exp']" ...>

---

如果不需要是数组，可以将选择设置为对象：

$scope.selection = {};

然后在你看来：

<input type="checkbox" ... ng-model="selection[capname]" ... />
<select ... ng-model = "selection[capname + '_Exp']" ...>

---

在对代码进行了一点修改之后，我找到了一个解决方案，可以满足我目前的需求。与@JoaoLeal建议的类似，我在下拉列表中更新了ng模型，使其与复选框中的模型相同，但引用了不同的属性。然后在我的控制器中，我简单地将下拉值添加到返回对象中，以便将其推送到具有所选功能的数组中。我还修改了我的专家阵列，以便更好地使用我的代码

通过这种方式，每当选中复选框并将其添加到数组中时，就会在选中下拉值后将其添加到数组中的复选框值下。取消选中复选框后，整个对象（复选框值和下拉列表值）将从数组中删除。如果更改了下拉列表值，则会立即在数组中更新该值

以下是更新的代码：

HTML:

---

在对代码进行了一点修改之后，我找到了一个解决方案，可以满足我目前的需求。与@JoaoLeal建议的类似，我在下拉列表中更新了ng模型，使其与复选框中的模型相同，但引用了不同的属性。然后在我的控制器中，我简单地将下拉值添加到返回对象中，以便将其推送到具有所选功能的数组中。我还修改了我的专家阵列，以便更好地使用我的代码

通过这种方式，每当选中复选框并将其添加到数组中时，就会在选中下拉值后将其添加到数组中的复选框值下。取消选中复选框后，整个对象（复选框值和下拉列表值）将从数组中删除。如果更改了下拉列表值，则会立即在数组中更新该值

以下是更新的代码：

HTML:

---

它必须是数组吗？您可以使用对象，然后将其转换为数组（如果）needed@JoaoLeal我想现在真的不必是数组。我指定数组的原因是，当我想将返回的结果发布到我的数据库时，我可以循环使用它。它必须是数组吗？您可以使用对象，然后将其转换为数组（如果）needed@JoaoLeal我想现在真的不必是数组。我指定数组的原因是，当我想将返回的结果发布到我的数据库时，我可以循环使用它。它必须是数组吗？您可以使用对象，然后将其转换为数组（如果）needed@JoaoLeal我想现在真的不必是数组。我指定数组的原因是，当我想将返回的结果发布到我的数据库时，我可以循环使用它。

$scope.expertise = [
    'Certified',
    'Knowledgable',
    'Interested'
];

$scope.selection = [];

$scope.$watch('filteredCaps | filter:{selected:true}', function (newValues) {
    $scope.selection = newValues.map(function (capname) {
        return {"capname" : capname.capname, "cid": capname.cid, "exp":capname.selectedExp};
    });
}, true);