16

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'}
]

とにかく、これがこれを行う方法かどうかはわかりませんが、コントローラーで多くの js コードを記述せずに、この動作を実現する方法を知りたいです。

を使用してこれを行うためのいくつかの回避策を実行し、とng-changeを渡し、配列内の列を見つけ、プロパティを取得し、 を更新しましたが、これにはもっと簡単な答えがあると本当に思います。filtercolumn.namecolumnstypefilter

4

1 に答える 1

21

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>

プランカー

更新された回答:

<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>
于 2013-07-29T11:01:10.163 に答える