jquery-confirmを使った角度アプリ。どのようにモーダルの選択を補間するのですか？

Question

私は角度のページに取り組んでいます。ユーザーがリンクをクリックすると、jquery-confirmを使用してモーダルがポップアップします。モーダルでは、選択ドロップダウンがあります。

オプションの長さは、特定のユーザーによって異なります。ユーザーに多数のグループがある場合、ドロップダウンは長くなります。

getAllGroupsはHTTP GET要求を行い、グループオブジェクトの配列でresというオブジェクトを返します。

GROUP_NAMESが、私は問題は$ .confirm

にして

getGroups_request = AppService.getAllGroups(token) 
    getGroups_request.promise.then (res) -> 
    group_names = res.data.map (m) -> 
     m.name 
    $.confirm 
     title: 'Select a group' 
     content: '<select id="target"></select><script>$.each(['+group_names+'], function(index, data){$("#target").append("<option>"+data+"</option>");});</script>' 

をこの配列を補間しているグループ名の配列

がさんが言ってみましょうで、GROUP_NAMESは= [ "AAA"、 "BBB"、 "CCC"私はこれを実行すると]

、クロムコンソールは、Iの場合、ハード、しかし

ReferenceError: aaa is not defined 

を言うだろうコードそれは動作します。この

content: '<select id="target"></select><script>$.each(["aaa","bbb","ccc"], function(index, data){$("#target").append("<option>"+data+"</option>");});</script>' 

のように$の.eachの配列。

この種の補間にはどのような構文が適していますか？

Answer 1

group_namesを実行するスクリプト内で、group_namesは有効なJavaScript配列の文字列を生成するのに必要な引用符で文字列化されません。つまり、[aaa,bbb,ccc]が生成され、["aaa","bbb","ccc"]が必要です。カンマを追加して修正する必要があります。

'["' + group_names.join('","') + '"]' 

ただし、これは魅力的な解決策ではないと私は思います。既に実行中のJavaScriptコンテキスト内にいる場合、実行されるJavaScriptの文字列を書くことは奇妙に思えます。前を構築する文字列をしないのはなぜあなたは$.confirmを呼び出す：

$select = $('<select />', { id: 'target' }) 
    .append group_names.map (group_name) -> 
     $('<option />') 
      .text group_name 
      .get 0 

$.confirm 
    title: 'Select a group', 
    content: $select[0].outerHTML 

注：私のCoffeeScriptはご容赦下さい。私は通常、この言語ではコードを書いていませんが、質問のコードと一貫性を保つのがいいかもしれないと思いました。