26

私は ui-bootstrap タイプアヘッドを使用しています。それは見事に動作します！ただし、結果リストに複数のプロパティや HTML を表示できるかどうかは疑問です。典型的な問題: 検索により、同じ値を持つ複数のオブジェクトが返されます。たとえば、'アメイジング グレイス' を検索すると ['アメイジング グレイス', 'アメイジング グレイス'] が返されます。一方は映画、もう一方は歌です。結果リストを次のようにしたいと思います。

amazing grace | movie
amazing grace | song

...ユーザーは自分が何を選択しているかを正確に知ることができます。さらに良いのは、タイトルの横にあるアイコンです。つまり、リスト内の各結果には何らかの HTML が含まれています。これらのいずれかをすぐに実行できますか?

4

1 に答える 1

100

http://angular-ui.github.io/bootstrap/typeaheadのディレクティブについて注目すべき点は、AngularJSのselect ディレクティブで使用される構文を模倣しようとしていることです。これは、バインドするモデルとラベルを選択するために使用されるすべての式が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 をラベル式に埋め込むことはできますが、これを記述して維持するのは大変です。幸いなことに、typehead ディレクティブを使用すると、次のように、一致したアイテムのカスタム テンプレートを提供できます。

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

かなりきちんとした小さなディレクティブですね。

于 2013-08-15T11:14:43.690 に答える