angularjs - ui bootstrap tpls

¿Bootstrap-UI Typeahead muestra más de una propiedad en la lista de resultados?

Question

Estoy usando tipeahead ui-bootstrap. ¡Funciona brillantemente! Sin embargo, me pregunto si es posible mostrar múltiples propiedades o incluso HTML en la lista de resultados. Problema típico: la búsqueda devuelve más de un objeto con el mismo valor. Por ejemplo, la búsqueda de ''gracia asombrosa'' regresa [''gracia asombrosa'', ''gracia asombrosa''] donde uno es la película y el otro es la canción. Me gustaría que la lista de resultados fuera más como:

amazing grace | movie
amazing grace | song

... para que el usuario sepa exactamente lo que están seleccionando. Aún mejor sería un icono al lado del título. En otras palabras, cada resultado en la lista contiene algo de HTML. ¿Cualquiera de estos se puede hacer fuera de la caja?

Answer 1

Lo que se debe tener en cuenta sobre la directiva typeahead de http://angular-ui.github.io/bootstrap/ es que intenta imitar la sintaxis utilizada por la directiva select de AngularJS. Significa que todas las expresiones utilizadas para seleccionar un modelo para unir y una etiqueta son expresiones AngularJS . Esto a su vez significa que puede usar cualquier expresión AngularJS para calcular el texto de su etiqueta.

Por ejemplo, para mostrar el texto deseado puede escribir:

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

Siempre que su modelo de datos se vea como sigue:

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

Trabajando plunk aquí: http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview

Escribir expresiones complejas para una etiqueta en el atributo typeahead puede volverse fea pero nada le impide mover la lógica de cálculo de etiquetas a una función expuesta en un ámbito, ej .:

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

donde la label es una función expuesta en un alcance:

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

Otro plunk: http://plnkr.co/edit/ftKZ96UrVfyIg6Enp7Cy?p=preview

En lo que respecta a su pregunta sobre los íconos, puede incrustar HTML en las expresiones de la etiqueta, pero esto es muy difícil de escribir y mantener. Afortunadamente, la directiva de typeahead le permite proporcionar una plantilla personalizada para su artículo coincidente, como por ejemplo:

typeahead-template-url="itemTpl.html"

En la plantilla personalizada puede usar cualquier expresión o directiva AngularJS que desee. Agregar iconos se vuelve trivial con un poco de ayuda de la directiva 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>

Y el plunk de trabajo: http://plnkr.co/edit/me20JzvukYbK0WGy6fn4?p=preview

Bonita directiva poco ordenada, ¿no es así?