web-dev-qa-db-ja.com

Bootstrap-UI Typeaheadは、結果リストに複数のプロパティを表示しますか？

私はui-bootstrap typeaheadを使用しています。それは見事に動作します！しかし、結果リストに複数のプロパティやHTMLを表示することが可能かどうか疑問に思っています。典型的な問題：検索は同じ値を持つ複数のオブジェクトを返します。たとえば、「amazing grace」を検索すると、「amazing grace」、「amazing grace」が返されます。1つは映画で、もう1つは歌です。結果リストを次のようにしたい：

amazing grace | movie
amazing grace | song

...したがって、ユーザーは選択内容を正確に把握できます。さらに良いのは、タイトルの横にあるアイコンです。つまり、リストの各結果にはHTMLが含まれています。これらのいずれかをそのまま使用できますか？

angularjsbootstrap-typeaheadangularjs-bootstrap
26
MFB

http://angular-ui.github.io/bootstrap/ のtypeaheadディレクティブについて注意すべきことは、 selectディレクティブで使用される構文を模倣しようとすることです。 AngularJSから。これは、バインドするモデルとラベルを選択するために使用されるすべての式が AngularJS式 であることを意味します。これは、AngularJS式を使用してラベルのテキストを計算できることを意味します。

たとえば、目的のテキストを表示するには、次のように記述できます。

typeahead="item as item.title + ' (' + item.type + ')' for item in titles | filter:{title:$viewValue}"

データモデルが次のようになっている場合：

$scope.titles = [
    {title: 'Amazing Grace', type: 'movie'},
    {title: 'Amazing Grace', type: 'song'}
  ];

ここでの作業プランク： http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview

typeahead属性でラベルの複雑な式を記述すると見苦しくなりますが、ラベル計算ロジックをスコープで公開されている関数に移動することを妨げるものはありません。

typeahead="item as label(item) for item in titles | filter:{title:$viewValue}"

ここで、labelはスコープで公開される関数です。

$scope.label = function(item) {
    return item.title + ' (' + item.type + ')';
  };

別のプランク： http://plnkr.co/edit/ftKZ96UrVfyIg6Enp7Cy?p=preview

アイコンに関する質問については、ラベル式にHTMLを埋め込むことはできますが、これを作成して維持するのはひどくなります。幸いにも、typeaheadディレクティブを使用すると、次のように、一致したアイテムにカスタムテンプレートを提供できます。

typeahead-template-url="itemTpl.html"

カスタムテンプレートでは、任意の式または必要なAngularJSディレクティブを使用できます。 ngClassディレクティブの助けを借りれば、アイコンの追加は簡単になります。

<script type="text/ng-template" id="itemTpl.html">
   <a tabindex="-1">
      <i ng-class="'icon-'+match.model.type"></i>
      <span  ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
   </a>
</script>

そして、働くプランク： http://plnkr.co/edit/me20JzvukYbK0WGy6fn4?p=preview

かなりきちんとした小さな指令ですね。

99
pkozlowski.opensource