Angularjs UI multiselect с начальным выбором

Question

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

Это мой код:

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> 

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

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

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

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

Answer 1

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

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

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