Robert Chabal Robert Chabal - 5 months ago 21
PHP Question

AngularJs Dropdown not sending the selected default value

I have an AngularJs dropdown in witch i set a value selected based on some conditions.
The dropdown work as it should but the only problem is that, if i don't do any action on it, if i submit the form, i wont receive the default value that was selected dinamically.

<!-- Payment Page -->
<div class="form-group">
<label class="control-label">Payment Page *</label>
<select name="payment_page" class="form-control" ng-model="invoice_data.form_data.payment_page">
<option ng-repeat="p_page in invoice_data.data.payment_pages" value="{{ p_page.id }}" ng-selected="(p_page.id === invoice_data.form_data.payment_page || p_page.default)">
{{ p_page.name }}
</option>
</select>
</div>
<!-- /End Payment Page -->


In the inspect element, the dropdown looks good, the option has it's value and so on but, after submitting the form i don't receive the selected value.
If i change, the dropdown selection and submit the form, i receive the value but as for default one no.

Answer Source

I do not know about php. But i can guess, This is because when your drop-down stays untouched ngModel does not get any value. For that when you submit your form you does not get default value. For solution :

You can do 2 way at controller or at html:

1) At html use ng-init directive for initialize ng model to default value.

  ng-init="invoice_data.form_data.payment_page = p_page.default ">

2)At controller when your form submit check for null value in ngModel or untouched of select dropdown, if it is null then add your default value.