Angularjs 模态 + 自动完成输入（附有 Plunker）答案

【问题标题】：Angularjs Modal + autocomplete input (Plunker attached)Angularjs 模态 + 自动完成输入（附有 Plunker）
【发布时间】：2016-11-08 22:19:34
【问题描述】：

我附上了以下小工具

http://plnkr.co/edit/3H2q4eVJW5h0K3EdJIBe?p=preview

<html>
</html>

根据 plunker，我有 3 个问题我无法解决。

1) 当用户点击“添加行”时，会显示 3 个输入字段。 2,3 和 1。我希望序列是 1,2，然后是 3。1 是应该在顶部的自动完成输入框。如果我将 1 带到顶部，那么我看不到 2 和 3。

2) 确定和关闭按钮不会关闭。我在函数中做错了吗？按“确定”应该让我在输入 1 处检索所选值。按“取消”应该关闭模式

3) 如果您看到 $scope.fetchList，它有一个 JSON 值。我希望 $scope.fetchList 改为使用数组。需要进行哪些更改才能获得以下内容。下面只是一个自动完成列表项的示例。

$scope.fetchList = ["ActionScript","AppleScript","Asp","BASIC","C"];

【问题讨论】：

标签： javascript jquery angularjs autocomplete modal-dialog

【解决方案1】：

我叉了你的 plunk here

我是这样解决您的问题的：

问题 1

我只是将你的元素包装在 div 中

  <div>
    <div>
      <br> Select name:&nbsp;&nbsp;
      <autocomplete placeholder="Enter sedol" style="width:29%" selection="selection" source="fetchList" />
    </div>
    <div>
      <br> Given Data1:&nbsp;&nbsp;
      <input type="text" readonly>
    </div>
    <div>
      <br> Given Data2:&nbsp;&nbsp;
      <input type="text" readonly>
    </div>
  </div>

问题 2

你有在父控制器中声明的保存和取消函数，而不是模态的控制器，所以我移动了它。

问题 3

我不明白这个问题。 fetchList() 已经返回了一个数组，尽管它是一个对象数组而不是字符串数组。将其更改为字符串数组会破坏指令中的各种代码。

【讨论】：

@jbrown- 对于第三期，这是我想要做的。我试图从数据库中获取值，而不是那些硬编码的值。所以这将是与这里不同的格式。它有一个带有 id 和 name 的对象数组。数据库值会有所不同。对吗？
@Patrick - 您目前在客户端拥有的内容对于自动完成很常见。我不知道具体来自您的 api（数据库）的内容，但我怀疑它是或者可以作为 JSON 对象数组返回。
@Jbrown- 最后一个查询，一旦我选择自动完成项目并在输入“1”中更新，然后我关闭模式，我如何获得选定的值？
@Patrick - 它可以在承诺 $modal.open 返回中处理。给我一分钟，我会更新 plunker。
@jbrown- 你有机会看吗？