4

I am trying to add a new select every time a button is clicked,

The 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>

The controller:

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

The array of objects gets saved in the array 'selects', but the placeholder is not coming in the selects as I am initializing the ng-model with an empty object initially. How to get he placeholder working in this case?

Here is the Plunker for the same.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Anubha
  • 1,345
  • 6
  • 23
  • 35

3 Answers3

11

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

Without this, the ui-select believes that you have selected an empty object (the selects[$index]) and won't 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 dont need to look up 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

dting
  • 38,604
  • 10
  • 95
  • 114
  • 1
    Earlier was using angularstrap selects, where initially placeholder came even if object was empty, so missed this, Thanks – Anubha Apr 03 '15 at 11:21
1

The fastest way to do that adding css display:block placeholder item. 

.select2-chosen{
   display: block !important;
}
Hadnazzar
  • 1,517
  • 19
  • 21
1

There are instances where the above solution works great and where it does 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-html="channel.text | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

^ Here to get the placeholder to show... just make 

$scope.selectedChannel = null;

Hope it helps...

Ken007
  • 67
  • 1
  • 4