Question

我目前正致力于创建一个表单，允许用户根据他们选择的功能为其集合添加新功能。此表单的结构为包含复选框和下拉列表的表格。该复选框允许用户选择他们希望添加的功能，下拉菜单允许他们选择具有该功能的专业水平。

以下是表单的HTML：

ul#nav li a {
color: #ccc;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid #0A0A0A;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s

我想要做的是拥有复选框的值，下拉列表填充数组或更新该数组中的值。我已经尝试过这样做，并且只能将复选框值填充到数组中。我使用$ watch这样，所以无论何时检查它都会被添加，当它被取消选中时它会被删除。我无法弄清楚如何将它应用于同一$ watch中的下拉值，以便将这些值添加到数组中的同一对象。

以下是我的控制器代码：

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

注意：filteredCaps是存储在前一个函数的$ scope.filteredCaps中的数组。此数组包含由功能名称和标识
组成的对象

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);

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

2 个答案: