Как разделить два набора данных в поле поиска ввода Угловой ввод?

0

Я пытаюсь построить автозаполнение окна поиска, используя Angular Bootstrap. Когда я начну вводить введенные поля, я хотел бы, чтобы вывод autosuggest (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 и все еще изучающий эту классную структуру.

Ваша помощь будет высоко оценена. Заранее спасибо!

Теги:
angular-bootstrap

2 ответа

1
Лучший ответ

Похоже, вы работаете в ракурсе с угловым бутстрапом. Если это так, эта ссылка может вам помочь.

0

Вы можете использовать md - автокомпонентный угол материала, это ссылка https://material.angularjs.org/latest/demo/autocomplete

Я надеюсь помочь.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню