Pass value of checkbox and dropdown into same array

Question

I am currently working on creating a form that will allow a user to add a new capability to their collection based on the capabilities they select. This form is structured as a table that consists of checkboxs and dropdowns. The checkbox allows users to select what capability they wish to add and the drop down allows them to select their level of expertise with that capability.

Here is the HTML for the form:

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

What I want to do is have the value of the checkbox and the drop down populate an array or update the value in that array if changed. I have tried doing this and have only been able to get the checkbox values to populate in the array. I used a $watch for this so whenever it is checked it is added and when it is unchecked it is removed. I cannot figure out how to apply this to the drop down value in the same $watch so that these values are added to the same object in the array.

Here is the Controller code I have:

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

Note: filteredCaps is an array stored in $scope.filteredCaps from a previous function. This array contains objects that consist of a capabilities name and id

Answer 1

After messing around with the code a bit I was able to find a solution that works for what I need as of right now. Similarly to what @JoaoLeal suggested I updated the ng-model on my dropdown to be the same as the model on the checkbox but with a different property referenced. Then in my controller I simply added the dropdown value to the return object so that it is pushed to the array with the selected capability. I also altered my expertise array to work better with my code.

By doing this in this way whenever a checkbox is selected its added to the array, then as soon as a dropdown value is selected it is added under the checkbox value in the array. Once the checkbox is unchecked, the entire object(checkbox values and dropdown value) is removed from the array. If the dropdown value is changed then it is updated in the array immediately.

Here is the updated code:

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>

Controller:

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

Answer 2

If it doesn't need to be an array, you can make selection an object:

$scope.selection = {};

And then on your view:

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

So your selection object should have a property capname with value capname if the checkbox is selected, and a property capname_Exp with the value from the dropdown.

When you want to save it back to the database, you can easily iterate on the properties of the object:

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