angularjs - 在 Angular 中使用 Bootstrap 预输入

Question

我目前正在开发一个 Web 应用程序，它使用 twitter-bootstrap 和 Angularjs 很好地协调。但是，我在使用预输入并将其用作 ng 模型时遇到了问题。

键入时一切正常，但是当我选择一个项目(建议)时，该值不会反射(reflect)在 Angular Controller 中，除非我在选择一个值后更改文本框的值。类型 -> 选择 -> 类型有效。类型 -> 选择不起作用。

HTML:

<form ng-submit="addAssignment(assignName)">
  <div class="input-append">
    <input type="text" placeholder="Type a name" ng-model="assignName" ng-change="dostuff()" data-provide="typeahead" data-source="{{ teamNames }}">
    <button class="btn" type="submit">Add</button>
 </div>
</form>

Angular 代码:

 $scope.addAssignment = function(name) {
    alert(name);
    return;
 }

我添加了一个 ng-change 函数，只是为了检查模型值何时更改。它仅在手动键入时更改，而不是在从出现在 typeahead 的列表中选择一个值时更改。

我感谢任何可能有助于解决此问题的回复。谢谢!

Answer 1

我建议从 AngularUI/boostrap 存储库中检查 typeahead 指令:http://angular-ui.github.com/bootstrap/

它是纯 AngularJS 中的 native 实现，因此不需要任何 3rd 方依赖项。最重要的是，它与 AngularJS 生态系统很好地集成了，因为它:
* 使用 select 中已知的简洁语法指示
* 理解 AngularJS 的 promise ，因此可以使用 $http 动态获取结果用最小的努力。