#angularjs #search #filter #jhipster
#angularjs #Поиск #Фильтр #jhipster
Вопрос:
Я сгенерировал экземпляр Jhipster, в котором есть объект person и объект family-link.
В объекте person я перечислил кучу людей. В семейной ссылке я хочу связать их вместе. т. Е. Человек A — сын человека B, Человек C — жена человека D и т.д.
На странице с семейной ссылкой «Добавить новый» я хочу иметь несколько выпадающих списков с функцией поиска, в которой перечислены все люди из объекта Person. Что-то связывает это:
- Имя: Джон Доу
- Отец: (выпадающий список лиц)
- Мать: (выпадающий список лиц)
- Дочерний элемент: (выпадающий список Person)
Я пытался использовать код, подобный этому:
<div class="form-group">
<label translate="archerApp.familyLink.child" for="field_child">Child</label>
<ui-select ng-model="vm.familyLink.child" id="field_child" ng-disabled="disabled" >
<ui-select-match placeholder="Select or search a person name in the list...">{{$select.selected.firstname ' ' $select.selected.lastname}}</ui-select-match>
<ui-select-choices repeat="person in vm.people | filter: $select.search track by person.id"
refresh="refreshPerson($select.search)" refresh-delay="0">
<span ng-bind-html="(person.firstname ' ' person.lastname) | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
</div>
Проблема в том, что этот код может перечислять только первых 20 пользователей из объекта Person. Я думаю, мне следует использовать API ElasticSearch и что-то вроде,
<form name="searchForm" class="form-inline">
<div class="input-group pull-right" >
<input type="text" class="form-control" ng-model="vm.searchQuery" id="searchQuery" placeholder="{{ 'archerApp.person.home.search' | translate }}">
<span class="input-group-btn width-min" >
<button class="btn btn-info" ng-click="vm.search(vm.searchQuery)">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<span class="input-group-btn width-min" ng-if="vm.currentSearch">
<button class="btn btn-info" ng-click="vm.clear()">
<span class="glyphicon glyphicon-trash"></span>
</button>
</span>
</div>
</form>
Это код для строки поиска в объекте Person. Но я не знаю, как заставить его работать с нижестоящим списком заданий.
Спасибо.
Ответ №1:
Ваши объекты, вероятно, разбиты на страницы, что означает, что запросы на извлечение данных включают переменные разбивки на страницы ( size
и page
), которые указывают, сколько данных необходимо извлечь. Если эти переменные не существуют, сервер будет использовать размер страницы по умолчанию (я полагаю, что по умолчанию используется page: 0
и size: 10
, но это могло быть изменено). Это происходит в ваших контроллерах angular.
Пример без переменных разбивки на страницы, которые будут использовать размер страницы по умолчанию:
vm.entities = Entity.query();
Пример с переменными разбивки на страницы:
vm.entities = Entity.query({
page: 0,
size: 20
});
Если вы хотите, чтобы в ваших выпадающих списках отображалось более 20 объектов, вам нужно установить размер страницы на что-то большее.