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

Question

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

这是表单的 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>

我想要做的是让复选框的值和下拉填充一个数组或更新该数组中的值（如果更改）。我已经尝试过这样做，并且只能将复选框值填充到数组中。我为此使用了 $watch ，因此只要选中它就会添加它，而取消选中它就会被删除。我不知道如何将它应用于同一个 $watch 中的下拉值，以便将这些值添加到数组中的同一个对象中。

这是我的控制器代码：

$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 组成的对象

Answer 1

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

$scope.selection = {};

然后在你看来：

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

因此，如果选中该复选框，您的 selection 对象应该有一个属性 capname，其值为 capname，以及一个属性 capname_Exp，其值为下拉列表中的值。

当您想将其保存回数据库时，您可以轻松地迭代对象的属性：

for (var prop in obj) {
  // do your logic here
}

Answer 2

在稍微弄乱了代码之后，我找到了一个适合我现在需要的解决方案。与@JoaoLeal 的建议类似，我将下拉列表中的 ng-model 更新为与复选框上的模型相同，但引用了不同的属性。然后在我的控制器中，我只是将下拉值添加到返回对象，以便将其推送到具有所选功能的数组中。我还更改了我的专业知识数组以更好地使用我的代码。

通过以这种方式执行此操作，只要将其添加到数组中，就会在选择下拉列表值时，它在数组中的复选框值下添加。取消选中复选框后，整个对象（复选框值和下拉值）将从数组中删除。如果下拉列表的值发生变化，那么它会立即在数组中更新。

这是更新后的代码：

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 for exp in expertise" 
                            ng-model = "capname.selectedExp">
                            <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 = [
    '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);