在 Angular 中使用 Bootstrap typeahead [英] Using Bootstrap typeahead with Angular

问题描述

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

打字时一切正常，但是当我选择一个项目(建议)时，该值不会反映在 Angular 控制器中，除非我在选择一个值后更改文本框的值.类型 -> 选择 -> 类型有效.类型 -> 选择不起作用.

HTML:

<div class="input-append"><input type="text" placeholder="输入名字" ng-model="assignName" ng-change="dostuff()" data-provide="typeahead" data-source="{{ teamNames }}"><button class="btn" type="submit">添加</button>

</表单>

角度代码:

 $scope.addAssignment = function(name) {警报(名称)；返回;}

我添加了 ng-change 函数只是为了检查模型值何时更改.只有在手动输入时才会更改，而不会在从预先输入的列表中选择值时更改.

感谢任何可能有助于解决此问题的回复.谢谢！

解决方案

AngularStrap 中有一个有效的原生实现，用于利用 AngularJS v1.2+

中的 ngAnimate 的 Bootstrap3

• 演示:http://mgcrea.github.io/angular-strap/##typeaheads

您可能还想结帐:

• 来源:https://github.com/mgcrea/angular-strap/blob/master/src/typeahead/typeahead.js
• Plunkr:http://plnkr.co/edit/VB43wxoDBhVyRMnKUHr9?p=preview

I am currently developing a web application which uses twitter-bootstrap and Angularjs in good harmony. However, I have problems with the typeahead and using it as a ng-model.

Everything works fine when typing, but when I select an item (a suggestion), the value does not reflect in the Angular controller unless I change the value of the textbox after a value has been selected. Type -> Select -> Type works. Type -> Select does not work.

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 code:

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

I have added a ng-change function just to check when the model value is changed. It is only changed when typing manually, and NOT when a value is selected from the list that appears on typeahead.

I appreciate any response that may help to resolve this issue. Thanks!

解决方案

There is a working native implementation in AngularStrap for Bootstrap3 that leverages ngAnimate from AngularJS v1.2+

• Demo : http://mgcrea.github.io/angular-strap/##typeaheads

You may also want to checkout:

• Source : https://github.com/mgcrea/angular-strap/blob/master/src/typeahead/typeahead.js
• Plunkr : http://plnkr.co/edit/VB43wxoDBhVyRMnKUHr9?p=preview

这篇关于在 Angular 中使用 Bootstrap typeahead的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！