Bootstrap-UI 자동 검색 결과 목록에 둘 이상의 속성을 표시하시겠습니까?

Bootstrap-UI 자동 검색 결과 목록에 둘 이상의 속성을 표시하시겠습니까?

UI 부트스트랩 자동 검색을 사용하고 있습니다.그것은 훌륭하게 작동한다!그러나 결과 목록에 여러 개의 속성이나 HTML을 표시할 수 있는지 궁금합니다.일반적인 문제: 동일한 값을 가진 개체를 두 개 이상 반환합니다.하나는 영화이고 하나는 노래인 '놀라운 은총' 리턴 [놀라운 은총, 놀라운 은총]을 찾아라.결과 리스트는 다음과 같이 하고 싶다.

amazing grace | movie
amazing grace | song

...사용자는 자신이 무엇을 선택하는지 정확히 알 수 있습니다.제목 옆에 아이콘이 있으면 더 좋을 것 같아요.즉, 리스트의 각 결과에는 HTML이 포함되어 있습니다.이것들 중 어느 것이라도, 곧바로 실시할 수 있을까요?

에 대해 알아야 할 것은typeaheadhttp://angular-ui.github.io/bootstrap/의 디렉티브는 AngularJS의 select 디렉티브에서 사용되는 구문을 모방하는 것입니다.바인딩할 모델과 레이블을 선택하는 데 사용되는 모든 식이 각도임을 의미합니다.JS 식즉, 모든 Angular를 사용할 수 있습니다.레이블의 텍스트를 계산하기 위한 JS 식입니다.

예를 들어, 원하는 텍스트를 표시하려면 다음과 같이 쓸 수 있습니다.

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'}
  ];

여기서 작업하는 plunk : 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-template-url="itemTpl.html"

사용자 지정 템플릿에서는 임의의 식 또는 Angular를 사용할 수 있습니다.원하는 JS 지시문입니다.아이콘을 추가하는 것은 간단한 작업입니다.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>

또, 기능하고 있는 plunk:http://plnkr.co/edit/me20JzvukYbK0WGy6fn4?p=preview

꽤 깔끔한 지시문이지, 안 그래?

언급URL : https://stackoverflow.com/questions/18245834/bootstrap-ui-typeahead-display-more-than-one-property-in-results-list