Wie funktioniert angular ng-model mit Objekten in ausgewählten Elementen?

Question

Ich habe ein Problem mit ng-Modell auf einem select Element beim Übergeben eines Objekts von option Elemente. Also, stellen wir eine Reihe von Spalten aus einer Tabelle columns genannt (die Tabelle Definition), und wir möchten, dass einige Filter auf dieser Definition creat

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> 

Wie können Sie sehen, würde ich diese filter mag den Wert von column zu erhalten und spezifischen Daten in ihm hinzuzufügen, so zu einem bestimmten Zeitpunkt, könnte mein Filter sein wie:

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

Wie auch immer, ich bin mir nicht sicher, ob dies der richtige Weg ist, aber ich würde gerne wissen, wie ich dieses Verhalten erreichen kann, ohne viel Code in den Controller schreiben zu müssen.

Ich habe einige Abhilfe diese ng-change zu erhalten getan mit, vorbei an der filter und die column.name, die Spalte in der columns Array finden, erhalten die type Eigenschaft, aktualisieren Sie die filter, aber ich glaube wirklich, dass es eine einfachere Antwort zu Dies.

Answer 1

können Sie ng-options verwenden das ausgewählte Objekt in einem Modell zu binden:

<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

Aktualisiert Antwort:

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