Как добавить выпадающий список на страницу объекта Jhipster, на которой перечислены все записи из объекта anther

#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 объектов, вам нужно установить размер страницы на что-то большее.