2016-05-17 11 views
0

我正在嘗試使用Angular Bootstrap構建搜索框自動完成功能。當我開始在輸入字段中輸入,我想自動提示輸出(HTML)是這樣的:如何分隔打字頭中的兩組數據角度輸入搜索框?

分類

藝術

科學

數學

門課程

代數

生物學

結果被分成部分 - 基於兩個數組類和課程。這就是我對角控制器

 $scope.courseSearchList = $http.get('api/courses', {cache: false}); 


    $scope.categorySearchList = $http.get('api/categories', {'cache': false}); 


    $q.all([$scope.categorySearchList, $scope.courseSearchList]).then(function(values) { 

     var a = values[0].data; 
     var b = values[1].data; 
     var c = []; 

     c.push(a); 
     c.push(b); 

     console.log(c[0], 'categories'); 
     console.log(c[1], 'courses'); 

     $scope.searchResults = c; 
    }); 

scope.searchResults所以將具有內部[[obj],[obj]]兩個陣列。第一個數組包含所有類別的標題,第二個數組包含所有課程的標題。範圍是由輸入字段叫,在這兒低於

<div class="custom-typehead"> 
    <input type="text" ng-model="selected" placeholder="search a course" 
    uib-typeahead="items.title for items in searchResults | filter:$viewValue:startsWith" typeahead-template-url="searchResults.html" 
    typeahead-on-select="onSelect($item, $model, $label)" typeahead-min-length="1" class="form-control" ng-init=""> 
    </div> 

    <script type="text/ng-template" id="searchResults.html"> 
    <div> 
     <div> 
      courses 

      {{match.model[0].title}} 

     </div> 

     <div"> 
      categories 
      {{match.model[1].title }} 
     </div> 
    </div> 
    </script> 

我知道腳本和輸入錯了,但我仍然試圖找到一種方法,分成兩個部分,如所期望的結果以上輸出;或者你可以爲這個問題提供更好的解決方案。任何人都可以幫我解決這個問題嗎? Angular品牌全新,仍然在學習這個很酷的框架。

您的幫助將不勝感激。提前致謝!

回答

1

看起來您正在使用angular-bootstrap框架。如果是那麼this link可能會對你有所幫助。

相關問題