我正在嘗試使用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品牌全新,仍然在學習這個很酷的框架。
您的幫助將不勝感激。提前致謝!