Наличие нескольких динамических блоков выбора angularjs

Question

Я построил импортер контактов csv, используя Papaparse. Сайт работает на угловом уровне.

Это моя форма:

<div ng-show="import_file_selected"> 
    <form ng-submit="processImport()" name="importForm"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <table class="table table-hover"> 
        <tr> 
         <th ng-show="has_header" class="col-md-4">Header</th> 
         <th class="col-md-4">Attribute</th> 
         <th class="col-md-4">Value Sample</th> 
        </tr> 
        <tr ng-repeat="row in rows"> 
         <td ng-show="has_header">{{row.header}}</td> 
         <td> 
          <select class="form-control" name="{{row.header}}"> 
           <option value="">Ignore</option> 
           <option ng-repeat="attribute in attributes" value="{{attribute.key}}">{{attribute.val}}</option> 
           <option value="add">Add Attribute</option> 
          </select> 
         </td> 
         <td>{{row.values}}</td> 
        </tr> 
       </table> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-6 form-group col-md-offset-3"> 
       <button class="btn btn-primary btn-block" type="submit">Save Import</button> 
      </div> 
     </div> 
    </form> 
</div> 

HTML, дает следующий результат:

До сих пор это все функции и дисплеи правильно. Однако я не знаю, как захватить данные в моей функции processImport().

Я думал об использовании привязки, но поскольку пользователь может добавлять/удалять атрибуты из окна выбора, я не могу предварительно создать окно выбора. И так как каждый csv может иметь различное количество столбцов, мне нужно повторить с каждым столбцом.

Любые предложения о том, как я могу захватить данные, представленные здесь? Пожалуйста, дайте мне знать, если я должен добавить что-нибудь еще.

Answer 1

Так что для тех, кто борется с чем-то подобным, это действительно не так сложно. Да, я знаю, что сейчас говорю, но когда вы видите решение, это довольно просто.

Так у меня есть объект вроде этого:

var $scope.rows = { 
    'header': "Account Code", 
    'header_safe': "Account Code", 
    'options': ["Ignore", "Cellphone Number", "First Name", "Full Name", "Last Name", "Title","Add Attribute"], 
    'values: "WELG01, ABDO01, ABOO01, ABOO2, ABOO02, ABOU01, ABRA03, ABRA01, ABRA02, ACKE04" 
},{ 
    'header': "Customer Name" 
    'header_safe': "Customer Name" 
    'options': ["Ignore", "Cellphone Number", "First Name", "Full Name", "Last Name", "Title","Add Attribute"], 
    'values': ", Abdool, Aboo, Aboobaker, Aboobaker, Abouchabki, Abraham Thato, Abrahams, Abrams, Ackerman Rulaine" 
} 

который, если вы видите изображение выше, вы бы признать, что отображается на изображении в моем вопросе. Для того, чтобы получить эти выпадающие работать, это то, что мой HTML выглядит следующим образом:

<table class="table table-hover"> 
    <tr> 
     <th ng-show="has_header" class="col-md-4">Header</th> 
     <th class="col-md-4">Attribute</th> 
     <th class="col-md-4">Value Sample</th> 
    </tr> 
    <tr ng-repeat="row in rows"> 
     <td ng-show="has_header">{{row.header}}</td> 
     <td> 
      <select class="form-control" ng-model="select[row.header_safe]" ng-options="option for option in row.options"></select> 
     </td> 
     <td>{{row.values}}</td> 
    </tr> 
</table> 

Затем, на моей отправке формы, просто у меня processImport() функцию. Эта функция выглядит так:

$scope.processImport = function() { 
    console.log($scope.select); 
} 

И это улавливает все мои данные.

Более чистый пример доступен here. Благодаря original author, поскольку он окончательно ответил на мой вопрос.