Angularjs UI multiselect with initial selection

Question

I am using Angularjs UI select. I'm facing a problem.

This is my code:

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>

Now how can I display selected categories as selected on page reload.Selected categories will be saved in the database and on page reload they will be available on the client side but how can I show them as selected and they also must not appear in the dropdownlist.

Edit Half of my problem is solved by nicost's suggestion of assigning selected categories fetched from database to $scope.SelectedCategories but the rest of the problem is those categories also appear in the dropdown.

The default behavior of ui multiselect is that if I select one category from the dropdown it is displayed in the textbox above as selected and that category is removed from the dropdown list and when I remove any category from the selected categories that category appears in the dropdownlist.

In my case If I remove selected categories from available Categories' list(I'm doing that on the server side) on page reload then they dont appear in the dropdowm but when I remove any selected category that category does not appear in the dropdownlist.

So what's exactelly the problem, you want the selected item not to be appear in the dropdown-list? and the selected categories aren't selected anymore after page reload? — nicost
– nicost, Commented Apr 22, 2016 at 8:26
@nicost yes selected categories are not selected.How can I shown them selected? — sqlcte
– sqlcte, Commented Apr 22, 2016 at 10:26
as you say, they are stored in the database, so you can retrieve them on page load (when controller gets loaded) and assign them to the $scope.SelectedCategories. I'm sorry, but without any concrete code how your database/webservices look like, it's hard to help... — nicost
– nicost, Commented Apr 23, 2016 at 2:24
thanks nicost for your help.Half of my problem is resolved by your help.I have edited my question to elaborate rest of the problem. — sqlcte
– sqlcte, Commented Apr 23, 2016 at 23:52

nicost · Accepted Answer · 2016-04-24 03:58:48Z

2

To prevent showing selected categories in your dropdown, you have to filter the values in there. You can do this with a custom filter:

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

I created a plunker for you. I hope this helps.

answered Apr 24, 2016 at 3:58

nicost

1,0502 gold badges11 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sqlcte Over a year ago

Thanks a lot nicost thats what I was exactly looking for.

nicost Over a year ago

Glad I could help you! ;)

Collectives™ on Stack Overflow

Angularjs UI multiselect with initial selection

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related