Angular 应用 jquery-确认。如何在模态中插入 select？

Question

我正在处理 Angular 页面。当用户单击 link 时，会弹出一个使用 jquery-确认的模式。在模式中，将有一个 select 下拉列表。

选项的长度将取决于特定的用户。如果用户有很多组，下拉列表会更长。

getAllGroups 发出 HTTP GET 请求和 returns 一个名为 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"]

当我运行这个时，chrome 控制台会说

ReferenceError: aaa is not defined

但是，如果我像这样在 $.each 中硬编码数组

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

有效。

这种插值的正确语法是什么？

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。我通常不使用这种语言编写代码，但我认为与问题中的代码保持一致可能会很好。

Angular 应用 jquery-确认。如何在模态中插入 select？

Angular app with jquery-confirm. How to interpolate the select in the modal?

javascript

jquery

interpolation

coffeescript

angularjs