Angular ui-select placeholder not working when ng-model is initialized

两盒软妹~` 提交于 2019-12-01 08:15:24

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

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

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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!