Adding angular directives to simple_form in rails breaks selected option for collection input

Question

Not sure if there's a workaround for this, I'm doing something wrong, or this is a collision between simple form or angular, but:

.field
  = f.input :role, collection: roles.map(&:name), selected: user.role.try(:name), include_blank: 'Select', required: true, input_html: { "ng-model" => "role" }

renders (which looks correct):

   <select ng-model="role" class="select required" name="user[role]" id="user_role">
      <option value="">Select</option>
      <option value="system">system</option>
      <option selected="selected" value="fcm">fcm</option>
      <option value="regulatory">regulatory</option>
      <option value="operations">operations</option>
      <option value="help_desk">help_desk</option>
     </select>

But the selected value is the include_blank value of 'Select'. And yes, role is set on the user.

score 3 · Accepted Answer · answered Jun 02 '16 at 13:45

The reason it's doing this is because of the way angular models work and it requires an understanding of this. Essentially the ruby generates the select correctly choosing the selected option of the select box too.

However, once the angular is loaded and sees ng-model on this select it sets the current selected option to the value of the model, in your case, role.

Thus if you want to have an angular model for this select, you need to set the initial value of that model.

Try the following:

.field
= f.input :role, collection: roles.map(&:name), include_blank: 'Select', required: true, input_html: { "ng-model" => "role", "ng-init" => "role = #{user.role.try(:name)}" }

Note that the selected option has been removed entirely since this will be controlled by the Angular model, which is initialized to that value using ruby string interpolation.

score -1 · Answer 2 · edited May 23 '17 at 12:31

I thought for a moment on this particular example and I am not quite sure what you expected to happen with the result.

Although, I assumed that you want to have option with attribute selected="selected" selected as a default value, instead of value="", which is only a blank field. If that I understood correctly and this is the point, that means there are several fields, which might be incorrect and We (the community) do not know how you completed them, but I think I dug up for the problem... ;)

Angular directive - At first, I do not know which version of angular you used in the example (I assume 1.X, because question have 6 months from this moment). The AngularJS select directive overrides the default behavior of select element and change it a bit.

I prepared a simple example with Angular v1.0.1 for the tests and it looks behave correctly in few aspects. If you use ng-model="role" and set the role to fcm (String), like $scope.role = 'fcm', the angular is obligate to set this value if it will find it.

I have also tested (AngularJS v1.0.1) what if the role is not set (undefined), then angular also point on empty string value like value="" and it not see into attribute selected and not set it as default. In the other side, the latest stable AngularJS v1.5.6 does support selected attribute example with AngularJS v1.5.6, so it might be the core of the problem.

Well, the solution for this is simple:

upgrade AngularJS for the latest 1.X version or
consider to use ngSelected or ngInit/SO solution instead if the version AngularJS you used support that.

Looking for a solution with Rails + Angular, not a pure Angular method of creating a select option. See my answer for the solution to this problem. — Guy, Jun 02 '16 at 13:46

Adding angular directives to simple_form in rails breaks selected option for collection input

2 Answers2