Jak wykonać kątowy model pracy z obiektami w wybranych elementach?

Question

Mam problem z ng-model na element select podczas przekazywania obiektu z elementów option. Więc wyobraź sobie, mamy szereg kolumn z tabeli o nazwie columns (definicja tabeli) i chcielibyśmy creat niektórych filtrów na tej definicji

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> 

jak można zobaczyć, chciałabym tego filter aby uzyskać wartość column i dodać konkretne dane w nim, więc w pewnym momencie, mój filtr może być tak:

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

W każdym razie, nie jestem pewny, czy to jest sposób na zrobienie tego, ale chciałbym wiedzieć, w jaki sposób mogę osiągnąć to zachowanie, z tym, że piszę dużo kodu js w kontrolerze.

zrobiłem niektóre obejście, aby to zrobić za pomocą ng-change, mijając filter i column.name, znajdź kolumnę w tablicy columns, uzyskać własność type, zaktualizuj filter, ale naprawdę myślę, że jest prostsza odpowiedź to.

Answer 1

Można użyć ng-options związać wybrany obiekt do modelu:

<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

Aktualizacja odpowiedź:

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