モーダルのidを動的な値にしたい

Question

やりたいこと

• 以下のコードにおいてモーダルのidをiの値を元に動的な値にしたい

- @notices.each_with_index do |notice, i|
  .container
    = link_to notice.title, "", data: {type: "button", toggle:"modal", target: "#demoNormalModal"}
  #demoNormalModal.modal[tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true"]
    .modal-dialog[role="document"]
      .modal-content
        .modal-header
          h5#demoModalTitle.modal-title
            = notice.title
          button.close[type="button" data-dismiss="modal" aria-label="Close"]
            span[aria-hidden="true"]
              | ×
        .modal-body
          = notice.content
        .modal-footer
          button.btn.btn-secondary[type="button" data-dismiss="modal"]
            | 閉じる
          button.btn.btn-primary[type="button"]
            | ボタン

試したこと

• []はネストさせることができないのでエラーになるがやりたいイメージは以下の通り

- @notices.each_with_index do |notice, i|
  .container
    = link_to notice.title, "", data: {type: "button", toggle:"modal", target: "##{i}"}
  div[id="#{i}",class="modal"[tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true"]]

問題

• モーダルをトグルさせるには、要素に動的なidとモーダルのオプションの値を持つmodalクラスを以下のように書かなければならないがslimでは[]をネストさせることはできないので、以下のような書き方はできない

#demoNormalModal.modal[tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true"]
↓
div[id="#{i}",class="modal"[tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true"]]

お知恵をお貸しください。よろしくお願いします。

Answer 1

以下でできました。ただし、出力されるHTMLに余計なカンマが入ってしまいます。

  - @notices.each_with_index do |notice, i|
    tr
      td.container
        = link_to notice.title, "", data: {type: "button", toggle:"modal", target: "##{i}"}
        div[id="#{i}", class="modal",tabindex="-1",role="dialog",aria-labelledby="modal",aria-hidden="true"]

出力

<div ,="" ,aria-hidden="true" ,aria-labelledby="modal" ,role="dialog" ,tabindex="-1" class="modal" id="0" style="display: none;">