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

Pass value of checkbox and dropdown into same array

本文关键字：同一个 数组 值传 复选框      更新时间：2023-09-26

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

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

组成的对象。

如果它不需要是一个数组，你可以选择一个对象:

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

在对代码进行了一些混乱之后，我能够找到一个适合我现在需要的解决方案。与@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);

相关文章：