Geek Answers Handbook

Angular ui-select substitute not working when initializing ng model

I try to add a new selection every time a button is pressed,

html:

<div ng-repeat = "select in selects track by $index"> <ui-select ng-model="selects[$index]" theme="select2" ng-disabled="disabled" style="min-width: 300px;"> <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match> <ui-select-choices repeat="person in people"> <div ng-bind-html="person.name | highlight: $select.search"></div> </ui-select-choices> </ui-select> </div> <button ng-click="addNewSelect()"> Add new select</button>

Controller:

  $scope.selects = [{}]; $scope.addNewSelect = function() { $scope.selects.push({}); }

The array of objects is stored in the 'selects' array, but the placeholder is not included in select, since I initialize the ng model with the empty object initially. How to make him fill a place in this case?

The following is Plunker .

+3
source share
3 answers

You are missing .selected after selects[$index] .

Without this, ui-select considers that you have selected an empty object ( selects[$index] ) and will not show the placeholder.

 <ui-select ng-model="selects[$index].selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">

http://plnkr.co/edit/56SHyE01BJ4EXglLlIcb?p=preview

also you don't need to search using the index, you can just use select.selected

 <ui-select ng-model="select.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">

http://plnkr.co/edit/3Uq8lDtDOaj5mIZVrCfv?p=preview

+10
source

The fastest way to do this is by adding a css display: block placeholder item.

 .select2-chosen{ display: block !important; }
+1
source

There are times when the above solution works great, and where not.

 <ui-select ng-model="selectedChannel" on-select="$ctrl.channelSelected(selectedChannel)"> <ui-select-match placeholder="Select Channel Type"> {{selectedChannel.text}} </ui-select-match> <ui-select-choices ui-select-header-group-selectable="$ctrl.selectGroupHeader" group-by="groupFindChannel" repeat="channel in (r.channels | filter: $select.search) track by channel.id"> <div ng-bind="channel.text | highlight: $select.search"></div> </ui-select-choices> </ui-select>

^ Here to get a placeholder to show ... just do

 $scope.selectedChannel = null;

Hope it helps ...

0
source

More articles:


All Articles