在选择菜单中添加所选项目列表
Posted
技术标签:
【中文标题】在选择菜单中添加所选项目列表【英文标题】：Add list of selected items in select menu 【发布时间】：2019-04-19 19:55:12 【问题描述】：我发现了这个非常好的 Angular 搜索菜单示例。
<ui-select ng-model="ctrl.person.selected" theme="bootstrap">
<ui-select-match placeholder="Select or search a person in the list...">$select.selected.name</ui-select-match>
<ui-select-choices repeat="item in ctrl.people | filter: $select.search">
<div ng-bind-html="item.name | highlight: $select.search"></div>
<small ng-bind-html="item.email | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
Working example in web editor
我想扩展示例并从选择菜单中添加所选项目的列表。你能帮我实现这个功能吗？
【问题讨论】：
请把问题解释清楚，否则只会被否决 问题是如何在选择菜单下方添加所选项目列表？ @PeterPenzov 我认为您应该查看您的问题的标签，因为根据代码，您使用的 AngularJS 与 Angular 非常不同 你的意思是从下拉列表中选择多个值？ 是的，你能给我举个例子吗？ 【参考方案1】：下面的代码将使您的下拉列表多选，并将显示下拉列表中的选定值列表
<body class="ng-cloak" ng-controller="DemoCtrl as ctrl">
Selected:<p ng-repeat="item in ctrl.person.selected"> item.name</p>
<form class="form-horizontal">
<fieldset>
<legend>ui-select inside a Bootstrap form</legend>
<div class="form-group">
<label class="col-sm-3 control-label">Default</label>
<div class="col-sm-6">
<ui-select ng-model="ctrl.person.selected" theme="bootstrap" multiple="true">
<ui-select-match placeholder="Select or search a person in the list...">$item.name</ui-select-match>
<ui-select-choices repeat="item in ctrl.people | filter: $select.search">
<div ng-bind-html="item.name | highlight: $select.search">
</div>
<small ng-bind-html="item.email | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
</div>
</div>
</fieldset>
</form>
</body>
ui-select 库提供了多个属性以实现多选
For detail documentation for ui-select multiple selection click here
希望这会有所帮助。
【讨论】：
以上是关于在选择菜单中添加所选项目列表的主要内容，如果未能解决你的问题，请参考以下文章