Angular ui-select 占位符在初始化 ng-model 时不起作用
Angular ui-select placeholder not working when ng-model is initialized
我试图在每次单击按钮时添加一个新的 select,
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>
控制器:
$scope.selects = [{}];
$scope.addNewSelect = function() {
$scope.selects.push({});
}
对象数组保存在数组 'selects' 中,但占位符没有出现在 select 中,因为我最初使用空对象初始化 ng-model。在这种情况下如何让占位符起作用?
这是相同的Plunker。
您在 selects[$index]
之后缺少 .selected
。
没有这个,ui-select 认为您 select 编辑了一个空对象(selects[$index]
)并且不会显示占位符。
<ui-select ng-model="selects[$index].selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
http://plnkr.co/edit/56SHyE01BJ4EXglLlIcb?p=preview
你也不需要使用索引查找,你可以使用select.selected
<ui-select ng-model="select.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
最快的方法是添加 css display:block 占位符项。
.select2-chosen{
display: block !important;
}
上述解决方案在某些情况下效果很好,但在某些情况下效果不佳。
<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>
^ 在这里让占位符显示...只需
$scope.selectedChannel = null;
希望对您有所帮助...
我试图在每次单击按钮时添加一个新的 select,
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>
控制器:
$scope.selects = [{}];
$scope.addNewSelect = function() {
$scope.selects.push({});
}
对象数组保存在数组 'selects' 中,但占位符没有出现在 select 中,因为我最初使用空对象初始化 ng-model。在这种情况下如何让占位符起作用?
这是相同的Plunker。
您在 selects[$index]
之后缺少 .selected
。
没有这个,ui-select 认为您 select 编辑了一个空对象(selects[$index]
)并且不会显示占位符。
<ui-select ng-model="selects[$index].selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
http://plnkr.co/edit/56SHyE01BJ4EXglLlIcb?p=preview
你也不需要使用索引查找,你可以使用select.selected
<ui-select ng-model="select.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
最快的方法是添加 css display:block 占位符项。
.select2-chosen{
display: block !important;
}
上述解决方案在某些情况下效果很好,但在某些情况下效果不佳。
<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>
^ 在这里让占位符显示...只需
$scope.selectedChannel = null;
希望对您有所帮助...