Angularjs UI множественный выбор с начальным выбором

Question

Я использую Angularjs UI select. Я столкнулся с проблемой.

Это мой код:

Javascript:

$scope.user.SelectedCategories
$scope.Categories= [
  { value: 'Reading', name: 'Reading Books',Id : 4 },
  { value: 'Sports', name: 'Physical Activity',Id : 9 },
  { value: 'Movies', name: 'Entertainment',Id : 7 },
  { value: 'Video Games', name: 'Passion',Id : 11 }
];

HTML:

<div class="input-group">
      <ui-select multiple ng-model="user.SelectedCategories" theme="bootstrap" sortable="true" close-on-select="false" style="width: 350px;">
      <ui-select-match placeholder="Select Categories...">{{$item.Value}}</ui-select-match>
      <ui-select-choices repeat="category.Id as category in  Categories">{{category.Value}}
      </ui-select-choices>
</div>

Теперь, как я могу отобразить выбранные категории как выбранные при перезагрузке страницы. Выбранные категории будут сохранены в базе данных, а при перезагрузке страницы они будут доступны на стороне клиента, но как я могу показать их как выбранные, и они также не должны появляться в выпадающем списке,

Редактировать Половина моей проблемы решена предложением Никоста назначить выбранные категории, извлеченные из базы данных, в $ scope.SelectedCategories, но остальная проблема заключается в том, что эти категории также появляются в раскрывающемся списке.

Поведение по умолчанию для мультиселекта пользовательского интерфейса состоит в том, что если я выбираю одну категорию из раскрывающегося списка, она отображается в текстовом поле выше как выбранное, и эта категория удаляется из раскрывающегося списка, а когда я удаляю любую категорию из выбранных категорий, эта категория появляется в раскрывающемся списке.,

В моем случае, если я удаляю выбранные категории из списка доступных категорий (я делаю это на стороне сервера) при перезагрузке страницы, они не отображаются в раскрывающемся списке, но при удалении любой выбранной категории эта категория не отображается в раскрывающемся списке.

Answer 1

Чтобы не отображать выбранные категории в раскрывающемся списке, необходимо отфильтровать значения в них. Вы можете сделать это с помощью специального фильтра:

<ui-select-choices  repeat="category in categories | filter: $select.search |filter:customFilter track by category.Id">

Я создал поршень для вас. Надеюсь, это поможет.