Передача значения флажка и выпадающего списка в тот же массив

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 для этого, поэтому всякий раз, когда он проверяется, он добавляется, и когда он не установлен, он удаляется. Я не могу понять, как применить это к выпадающему значению в тех же часах $, чтобы эти значения были добавлены к одному и тому же объекту в массиве.

Вот код контроллера у меня есть:

$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 от предыдущей функции. Этот массив содержит объекты, состоящие из имени возможностей и ид

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-модель в моем выпадающем списке, чтобы она была такой же, как модель в этом флажке, но с другим ссылкой. Затем в моем контроллере я просто добавил значение раскрывающегося списка в возвращаемый объект, чтобы он был перенесен в массив с выбранной возможностью. Я также изменил свой массив экспертиз, чтобы лучше работать с моим кодом.

Таким образом, всякий раз, когда флажок установлен, он добавляется в массив, а затем, как только выпадающее значение выбрано, оно добавляется под значением флажка в массиве. Когда флажок снят, весь объект (значения флажка и выпадающее значение) удаляется из массива. Если значение раскрывающегося списка изменено, оно немедленно обновляется в массиве.

Вот обновленный код:

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