AngularJs ng-optionen bekommen id

Question

Das sollte wirklich einfach sein, aber ich weiß nicht, wie es geht. Ich habe eine Auswahlsteuerung, die wie folgt aussieht:

<div class="form-group" ng-class="{ 'has-error' : saveForm.status.$invalid && !saveForm.status.$pristine }"> 
    <label class="control-label">Status</label> 
    <select class="form-control" name="status" ng-options="status.name for status in controller.statuses.data track by status.id" ng-model="controller.model.data.statusId" required> 
     <option value="">Select a status</option> 
    </select> 
</div> 

das ng-Modell wurde controller.model.data.status gebunden weil ich zu der Zeit das gesamte Objekt wollte. Jetzt brauche ich nur den ausgewählten id, so änderte ich das ng-Modell zu controller.model.data.statusId und wie Sie das ganzen Status Objekt erwarten würden, ist nun die Bindung an dem jeweiligen Modell Standort. Wie kann ich es bekommen, nur die ID anstelle des gesamten Objekts zu wählen, während die Namen im Select-Steuerelement angezeigt werden?

codepen Beispiel wie gewünscht:

http://codepen.io/r3plica/pen/yNgLqp

Answer 1

Ich ziehe die select as Syntax von ng-options. (Dies funktioniert nicht mit track by). Insbesondere mag ich das Formular select as label for value in array, mit dem Sie ändern können, was tatsächlich verbindlich ist (select) von dem, was angezeigt wird (label).

Aus der Dokumentation hat die Syntax 4 Teile:

• select das ist der Ausdruck, den Sie tatsächlich binden möchten. Oft ist es eine Eigenschaft eines Elements im Array. In Ihrem Fall ist es status.id
• label Dies ist der Ausdruck, der bestimmt, wie das Objekt im Dropdown angezeigt wird. Auch dies ist oft eine Eigenschaft, aber es kann wirklich jeder Winkel Ausdruck (wie status.name + ': ' + status.description) In Ihrem ist es nur status.name
• value ist der Name (Alias), den Sie für ein einzelnes Element des Arrays verwenden möchten. In deinem ist es status, aber es ist nur ein Name, also könntest du es zu fast allem ändern (du müsstest die select und label auch ändern).
• array ist offensichtlich das Array, das Sie als Dropdown-Datenquelle verwenden möchten. In deinem ist es controller.statuses.

In Ihrem Code komplett montiert:

ng-options="status.id as status.name for status in controller.statuses"