angularjs - 在 Rails 中向 simple_form 添加 Angular 指令会破坏集合输入的选定选项

Question

不确定是否有解决方法，我做错了什么，或者这是简单形式或 Angular 之间的冲突，但是:

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

渲染(看起来正确):

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

但所选值是“Select”的 include_blank 值。是的， Angular 色是为用户设置的。

Answer 1

这样做的原因是 Angular 模型的工作方式，并且需要对此有所了解。本质上，Ruby 也会生成正确选择选择框的 selected 选项的 select 。

但是，一旦加载了 Angular 并在此select上看到ng-model，它将当前选定的选项设置为模型的值，在您的情况下， Angular 色。

因此，如果您想要为此选择建立 Angular 模型，则需要设置该模型的初始值。

尝试以下操作:

.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)}" }

请注意，selected 选项已被完全删除，因为它将由 Angular 模型控制，该模型使用 ruby​​ 字符串插值初始化为该值。