使用带角度引导预输入 [英] Using Bootstrap typeahead with Angular

查看:154
本文介绍了使用带角度引导预输入的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前正在开发它使用Twitter的引导和Angularjs良好和谐的Web应用程序。然而,我与预输入问题,并把它作为一个NG-模式。

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>

角code:

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

我添加了一个NG-更改功能只是为了检查时,模型值被改变。它手动输入的时候才改变,而不是当从上预输入显示的列表中选择一个值。

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.

我AP preciate可以帮助解决这个问题任何回应。谢谢!

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

推荐答案

有在 AngularStrap 的工作机实现Bootstrap3,利用 ngAnimate 从AngularJS V1.2 +

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


  • 演示:<一href=\"http://mgcrea.github.io/angular-strap/##typeaheads\">http://mgcrea.github.io/angular-strap/##typeaheads

您可能还需要签:


  • 来源:<一个href=\"https://github.com/mgcrea/angular-strap/blob/master/src/typeahead/typeahead.js\">https://github.com/mgcrea/angular-strap/blob/master/src/typeahead/typeahead.js

  • Plunkr:<一href=\"http://plnkr.co/edit/VB43wxoDBhVyRMnKUHr9?p=$p$pview\">http://plnkr.co/edit/VB43wxoDBhVyRMnKUHr9?p=$p$pview

这篇关于使用带角度引导预输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆