AngularJs Dropdown not sending the selected default value

Question

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.

Jenny · Accepted Answer · 2017-05-12 06:10:55Z

1

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.

answered May 12, 2017 at 6:10

Jenny

6634 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robert Chabal · Accepted Answer · 2017-05-12 06:41:33Z

1

Thanks Jenny for your time and response... I have done this way in controller:

angular.forEach(response.data.payment_pages, function(value, key) {
  if (value.default) {
    $scope.invoice_data.form_data.payment_page = value.id;
  }
});

answered May 12, 2017 at 6:41

Robert Chabal

417 bronze badges

Collectives™ on Stack Overflow

AngularJs Dropdown not sending the selected default value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related