私はAngular Bootstrapを使って検索ボックスオートコンプリートを構築しようとしています。タイプヘッドの2つのデータセットを分離する方法角度入力検索ボックス?
カテゴリー
芸術
科学
:私は、入力フィールドに入力を開始すると、私はこのようなものにするためにオートサジェスト出力(HTML)を希望します数学
コース
代数
結果を部分に分割されている塗装
生物学
- 二つの配列に基づいて、カテゴリおよびコース。これには、scope.searchResults
が[[obj],[obj]]
内の二つの配列を持つことになり、角度コントローラのために私が持っているもの
$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;
});
です。最初の配列にはすべてのカテゴリのタイトルが含まれ、2番目の配列にはすべてのコースのタイトルが含まれます。範囲は、ここでは、以下の私はスクリプトと入力が間違っていることを知っている
<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の新しいブランドで、このクールなフレームワークをまだ学んでいます。
お手数をおかけします。前もって感謝します!