Как сделать angular ng-model работать с объектами в элементах выбора?

У меня проблема с ng-model на элементе select при передаче объекта из элементов option. Итак, представьте, что у нас есть массив столбцов из таблицы с именем columns (определение таблицы), и мы хотели бы создать некоторые фильтры по этому определению

var columns = [
  {name: 'Account ID',    type: 'numeric'},
  {name: 'Full name',     type: 'text'},
  {name: 'Date of birth', type: 'date'},
  {name: 'Active',        type: 'boolean'}
  // and so on
];

var filters = [{}];

HTML:

<div class="form-field" ng-repeat="filter in filters">
  <select ng-model="filter">
    <option value="" disabled>Choose filter</option>
    <option ng-repeat="column in columns" ng-value="column">{{column.name}}</option>
  </select>
  <input type="text" ng-model="filter.value">
</div>

Как вы можете видеть, мне бы хотелось, чтобы filter получил значение column и добавил в него определенные данные, поэтому в какой-то момент мой фильтр мог бы выглядеть так:

[
  {name: 'Account ID', type: 'numeric', value: 123},
  {name: 'Active', type: 'boolean', value: 'Yes'}
]

Во всяком случае, я не уверен, что это способ сделать это, но я хотел бы знать, как я могу добиться такого поведения, при этом мы будем писать много js-кода в контроллере.

Я сделал некоторое обходное решение, чтобы сделать это, используя ng-change, передав filter и column.name, найдите столбец в массиве columns, получите свойство type, обновите filter, но я действительно думаю, что есть более простой ответ на этот вопрос.

Ответ 1

Вы можете использовать ng-options для привязки выбранного объекта к модели:

<div class="form-field" ng-repeat="filter in filters">
   <select ng-options="column.name for column in columns" ng-model="filter.value">
         <option value="" disabled>Choose filter</option>
   </select>

   <input type="text" ng-model="filter.value.name">
</div>

Plunker

Обновленный ответ:

<div class="form-field" ng-repeat="filter in filters">
   <select ng-options="column.name for column in columns" ng-model="filters[$index]">
     <option value="" disabled>Choose filter</option>
   </select>

   <input type="text" ng-model="filters[$index].name">
</div>