使用bootstrap-select插件实现下拉菜单多选,用ng获取后台数据,但是设置被选中的数据无法显示选中效果

发布于 2022-09-04 08:19:19 字数 761 浏览 6 评论 0

在一个页面中,使用bootstrap和angular框架,需要实现一个下拉菜单多选的情况,于是找了一个bootstrap的插件——bootstrap-select。用ng从后台获取的数据,本来设置为被选中,但是无法显示被选中。贴图如下:

clipboard.png

这三条选项用ng设置为selected的,但是现在显示“没有选中任何项”。而且点击选项,不会出现被选中效果“√”。下图是点击第一个选项的效果:

clipboard.png

可以看出来,其实三个选项是被选中的,但是效果无法显示。第一个选项点击后被取消选中效果,二,三选项在选项框中显示出来了,但是“√”仍无法显示。

想要的效果为:

clipboard.png

应该与ng的数据加载有关,求大神指导!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

静若繁花 2022-09-11 08:19:19

想文献您这个功能是这么是怎么实现的啊,求教程,现在需要实现这样的一个功能。

緦唸λ蓇 2022-09-11 08:19:19

你是怎么repeat的?贴出代码看看。
<select class="form-control" ng-model="member.memberType" id="memberType" name="memberType"

                                ng-options="option.value as option.text for option in memberTypeArray"></select>  

我这边只要给$scope.member.memberType = 1;就能回显出下拉框的值。

七度光 2022-09-11 08:19:19

angular改变数组值后需要对组件进行手动刷新:

$('.selectpicker').val('Mustard');
$('.selectpicker').selectpicker('render');

上面的两个可以合并为:
$('.selectpicker').selectpicker('val', 'Mustard');

多选的话参数为数组,同时还有:
$('.selectpicker').selectpicker('selectAll');//选中所有
$('.selectpicker').selectpicker('deselectAll');//取消选中所有
.selectpicker应是指向select的选择器

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文