angularjs ui-bootstrap typeahead 自動完成功能如何返迴對象

2015-04-25 15:45:00
hainuo
原創 5905
摘要:主要是講述在使用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")這樣很好吧
發錶評論
陸 乘 伍 =
評論通過審核後顯示。