angularjs - 如何使 angularJS ng-model 与选择元素中的对象一起使用？

Question

我在 select 上遇到了 ng-model 的问题从 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'}
]

无论如何，我不确定这是这样做的方式，但我想知道如何实现这种行为，而无需在 Controller 中编写大量 js 代码。

我使用 ng-change 做了一些变通方法来完成这项工作，通过 filter和 column.name , 找到 columns 中的列数组，获取 type属性，更新 filter ，但我真的认为有一个更简单的答案。

Answer 1

您可以使用ng-options将选定对象绑定(bind)到模型:

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