angularjs ui-bootstrap typeahead 自动完成功能如何返回对象

2015-04-25 15:45:00
hainuo
原创 5494
摘要:主要是讲述在使用angularjs的一个ui扩展的高级技巧,这个扩展叫做自动完成
我认为还是首先上英文的说明 这样大家先阅读一下能够帮助理解我要讲的问题Typeahead is a AngularJS version of Bootstrap v2's typeahead plugin. This directive can be used to quickly create elegant typeaheads with any form text input.It is very well integrated into AngularJS as it uses a subset of the select directive syntax, which is very flexible. Supported expressions are:label for value in sourceArrayselect as label for value in sourceArrayThe sourceArray expression can use a special $viewValue variable that corresponds to the value entered inside the input.This directive works with promises, meaning you can retrieve matches using the $httpservice with minimal effort.The typeahead directives provide several attributes:ng-model  : Assignable angular expression to data-bind totypeahead  : Comprehension Angular expression (see select directive)typeahead-append-to-body  (Defaults: false) : Should the typeahead popup be appended to $body instead of the parent element?typeahead-editable  (Defaults: true) : Should it restrict model values to the ones selected from the popup only ?typeahead-input-formatter  (Defaults: undefined) : Format the ng-model result after selectiontypeahead-loading  (Defaults: angular.noop) : Binding to a variable that indicates if matches are being retrieved asynchronouslytypeahead-min-length  (Defaults: 1) : Minimal no of characters that needs to be entered before typeahead kicks-intypeahead-on-select($item, $model, $label) (Defaults: null) : A callback e x e cuted when a match is selectedtypeahead-template-url  : Set custom item templatetypeahead-wait-ms  (Defaults: 0) : Minimal wait time after last character typed before typeahead kicks-intypeahead-focus-first (Defaults: true) : Should the first match automatically be focused as you type?看了说明来个例子  [http://runjs.cn/code/tvjfuqd2](http://runjs.cn/code/tvjfuqd2)  代码地址在这里然后就是我的说明了看看html第31行 ``` ```这里面讲了一个技巧 就是这个```state as state.name for state```    原先就是使用state.name for state  所以返回的数据为字符串    这里使用了state as state.name 就是以state为返回值而展示名称为name值    还有更加巧妙的方式```typeahead="address as (address.pinyin + address.taxpayer_name  ) for address in vm.getLocation($viewValue)"```这样的结果就是![blob.png](/ueditor/ php/upload/image/20150425/1429950099100513.png "1429950099100513.png")这样很好吧
发表评论
叁 减 拾 =
评论通过审核后显示。