14

次のようにAngularJSとUI Bootstraptypeaheadを使用してセットアップしようとしています:

.html

<input type="text" ng-model="selectedStuff" typeahead="stuff.name for stuff in stuffs | filter:$viewValue"/>

<span>{{selectedStuff.name}}</span>
<span>{{selectedStuff.desc}}</span>

.js

$scope.stuffs= [
                {
                 "name":"thing1",
                 "desc":"this is the first thing"
                },
                {
                 "name":"thing2",
                 "desc":"this is the second thing"
                }
               ]

現在、選択した名前でモデルを更新できましたが、私の目標は、オブジェクト全体をtypeahead. 入力のみを使用してこれを行うクリーンな方法はありますか?

4

2 に答える 2

26

確実なこと ：-）

http://angular-ui.github.io/bootstrap/の typeahead ディレクティブは、AngularJS のselect ディレクティブと同じ非常に柔軟な構文を使用しますng-options。したがって、次のように書くことができます。

typeahead="stuff as stuff.name for stuff in stuffs | filter:$viewValue"

ここに作業プランクがあります: http://plnkr.co/edit/5kGZkNPZ7rIFfb4Rvxej?p=preview

于 2013-04-15T14:48:48.283 に答える
0

私も同じ問題を抱えていました。私はそれを解決しました

typeahead="country.name for country in countryList | filter:$viewValue | limitTo:8"

ここで countryList は国オブジェクトのリストです。name は、country オブジェクトのプロパティの 1 つです。私にとってはうまくいっています。

于 2015-01-15T19:05:58.440 に答える