Angular ng-multiselect-dropdown中的预选选项
Angular ng-multiselect-dropdown是一个基于Angular框架开发的多选下拉框组件。它允许用户从一个下拉列表中选择多个选项。
预选选项是指在下拉列表展开时，默认已经选中的选项。可以通过设置组件的属性来指定预选选项。
该组件的主要优势包括：
- 提供了直观且用户友好的界面，方便用户选择多个选项。
- 支持自定义模板，可以根据实际需求对下拉列表的样式进行定制。
- 具有强大的过滤功能，可以根据用户输入的关键字快速筛选出符合条件的选项。
- 提供了丰富的事件和方法，方便开发者根据业务需求进行交互和操作。
- 兼容性良好，可以在各种现代浏览器和移动设备上正常运行。
Angular ng-multiselect-dropdown适用于以下场景：
- 当需要让用户从一个较大的选项列表中选择多个选项时，可以使用该组件来提升用户体验。
- 在表单中需要实现多选下拉框时，可以使用该组件来简化开发过程。
腾讯云提供了一系列云计算相关产品，可以满足不同场景的需求。以下是一些推荐的腾讯云产品及其介绍链接地址：
- 云服务器（CVM）：提供可扩展、安全可靠的云计算基础设施。产品介绍链接
- 云数据库MySQL版：高性能、可扩展的关系型数据库服务。产品介绍链接
- 云对象存储（COS）：安全可靠的大规模数据存储和处理服务。产品介绍链接
- 人工智能服务平台：提供丰富的人工智能技术和API接口。产品介绍链接
- 物联网（IoT）：提供全面的物联网解决方案和设备接入服务。产品介绍链接
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目情况进行评估。
相关·内容
如何卸载ng-multiselect-dropdown？我试过使用npm uninstall ng-multiselect-dropdown，但它没有卸载。
ng remove ng-multiselect-dropdown也不起作用。
这是我的package.json
{
"_from": "ng-multiselect-dropdown",
"_id": "ng-multiselect-dropdown@0.3.4",
"_inBundle": false,
"_integrity
浏览 7提问于2021-06-25得票数 1
我在我的angular 6项目中使用ng-multiselect-dropdown进行多选。
<ng-multiselect-dropdown
[placeholder]="'LP URL'"
[data]="getLp_url"
[settings]="lp_url_dropdownSettings"
name="lp_url[{{i}}][{{k}}]"
>
</ng-multiselect-dropdow
浏览 1提问于2018-10-24得票数 1
我在Angular中使用ng-multiselect-dropdown创建一个多选下拉菜单作为自定义标题。我似乎不能确定的是，是否有一种方法可以设置我将在列表中预先选择的值。下面是我的下拉列表的代码： <ng-template *ngIf="column.dropdown" let-column="column" let-sort="sortFn"
ngx-datatable-header-template>
<ng-multiselect-dropdown [placeholder]="
浏览 58提问于2018-07-13得票数 1
回答已采纳
我正在使用这个多选下拉菜单(https://www.npmjs.com/package/ng-multiselect-dropdown)在我的angular项目中实现多选。我面临的一个奇怪的问题是，在它的演示和我的stackblitz演示( https://stackblitz.com/edit/angular-5wcm6z?file=src%2Fapp%2Fapp.component.html)中，当我单击外部时，它就会关闭。(显示:无)动态应用。但是，当我在实际项目中使用相同的组件时，外部的单击事件不起作用，我必须再次单击下拉菜单才能将其关闭。 这就是我如何使用这个下拉列表。 <d
浏览 14提问于2020-08-26得票数 0
数据在object .when i映射到ng多选择dropdown.value，而不是显示在drop down..angular7中。
<div class="form group mltslt" *ngIf="individual==true">
<label for="code">Select Student(s) by Register Number </label>
<ng-multiselect-dropdown name="subjecs" [data]=
浏览 0提问于2019-04-05得票数 0
回答已采纳
我正在使用ng多选择下拉列表，我想更改默认样式，但它不能过大，我尝试在index.html、angular.json、style.css文件中给出样式，也尝试了内联样式，但是没有任何更改。
Css尝试：
ng-multiselect-dropdown .multiselect-dropdown > .dropdown-btn{
font-size:12px;
}
ts：
styles: [".multiselect-dropdown .dropdown-btn{
font-size:12px;
}"]
另一种方式是：
multiselec
浏览 0提问于2018-11-19得票数 5
回答已采纳
我想实现自动完成功能，所以我发现一个相同的选项是使用多选择下拉列表。所以我用了这个模块-
但在执行之后，我得到了这些错误-
错误-
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'placeholder' since it isn't a known property of 'ng-
multiselect-dropdown'.
1. If 'placeholder' is an Angular directiv
浏览 0提问于2018-10-22得票数 9
回答已采纳
已按照angular 9的https://www.npmjs.com/package/ng-multiselect-dropdown执行以下步骤 在浏览器控制台中收到以下错误 TypeError:无法读取未定义的属性“”idField“”
浏览 13提问于2020-04-13得票数 17
回答已采纳
我有一个angular应用程序，里面有ng-multiselect-dropdown。为了向dropdown提供列表，我从ngOnInit内部的api获取services，如下所示 selectedOfferedServices: IDropdownSettings = {};
ngOnInit(){
this.getServices();
this.selectedOfferedServices = {
singleSelection: false,
idField: 'id',
textField: 'deliveryT
浏览 23提问于2020-11-09得票数 0
回答已采纳
我正在尝试在另一个组件/页面中使用组件(即。通过RouterModule.forRoot在app.mudule.ts注册)。我已经按照这个中的建议在我的组件中导入了它-
import { Component, OnInit, NgModule, NO_ERRORS_SCHEMA } from
'@angular/core';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { FormsModule } from '@angular/forms&
浏览 1提问于2019-01-07得票数 3
回答已采纳
将angular-ui与select2配合使用，如下所示：
<select ui-select2 ng-model="search.categories" multiple style="width:300px" data-placeholder="select category">
<option value="open" >open</option>
<option value="close" >close</option>
&
浏览 0提问于2013-01-15得票数 4
回答已采纳
2回答
在how to implement multiple selection and reactive form ?上有例子吗
我试图在multiselect-dropdown上设置选定的项(从数据库中检索)，它将更新显示的项(视图)，但它会引发以下错误：
core.js:12501 ERROR TypeError: control.registerOnChange is not a function
at setUpModelChangePipeline (forms.js:2064)
at setUpControl (forms.js:2007)
atFormGroup
浏览 4提问于2019-12-17得票数 3
2回答
我正在尝试使用角预选多个对象到jQuery选择的控件中.见我的Plunkr这里：
数据设置为我的控制器中的模型，如下所示：
$scope.valueTypes = [
{ code: 'V1', name: 'Value 1', description: 'Description 1' },
{ code: 'V3', name: 'Value 3', description: 'Description 3' }
];
我选择的包装器指令如下所示：
.directive(&#
浏览 1提问于2014-04-24得票数 1
回答已采纳
3回答
我有一个多选择的下拉列表如下-
<ng-multiselect-dropdown [placeholder]="'Select name'"
[data]="dropdownList" [(ngModel)]="selectedItems"
[settings]="dropdownSettings">
</ng-multiselect-dropdown>
现在是这样-
当我选择选项的时候，如果选项有两个单词，它就是越界了。例如-如果我的选择是
禤浩焯·沃哈特
浏览 16提问于2022-09-21得票数 0
我使用的是ng-multiselect-dropdown，我想将类添加到列表中的特定项中。
HTML
<ng-multiselect-dropdown
[data]="mydata"
[settings]="mysettings"
>
</ng-multiselect-dropdown>
TypeScript
有办法做这样的事吗？
tempList[i] = { ...tempList[i], **cssClass: 'my css code'** };}
getData() {
this.service.getD
浏览 2提问于2021-08-06得票数 0
我让模板使用ng-multiselect-dropdown <ng-multiselect-dropdown [data]="listItems" [(ngModel)]="selectedItem" [settings]="ItemSettings">
</ng-multiselect-dropdown> 当我使用新项目更新listItems时，我想刷新此select中的[data]。我该怎么做呢？
浏览 35提问于2019-04-15得票数 1
我对此感到非常困惑，我想要做的是在我的ionic应用程序中使用ngFor angular指令创建的动态选项列表中显示一个“预选”选项
现在我有这个
<ion-item>
<ion-label>Number of Guests</ion-label>
<ion-select>
<ion-option *ngFor="let person of gests" value="{{person.id}}" selected="{person.id[2]}">{{p
浏览 5提问于2018-02-20得票数 0
回答已采纳
下面的select在Angular 1.3.15中的2中预选了正确的option，但在Angular 1.6.1中没有：
Selected is {{myNumber}}
<select ng-model="myNumber">
<option ng-selected="i == myNumber" ng-repeat="i in [1,2,3]">
{{i}}
</option>
</select>
然后在JS中：
$scope.myNumber = 2;
在Ang
浏览 2提问于2017-03-12得票数 1
1回答
角度多选自定义触发器
、、、
是否有一个具有自定义触发器按钮的angular 2+多选下拉菜单？ 我正在寻找一些类似于旧的AngularJS“使用转换的自定义触发器元素”(here)...however，ng-select，ng-multiselect-dropdown和其他似乎不提供这个功能的东西。 我正在寻找任何可行的选择与示例代码。 ?
浏览 12提问于2019-01-13得票数 3
回答已采纳
我正在使用angular 中的多选下拉菜单，并希望使用量角器从下拉菜单中选择元素。DOM元素如下所示。我需要选中值为'Navkit‘的复选框。
<ng-multiselect-dropdown name="dropdown">
<div class="multiselect-dropdown">
<div class="dropdown-list">
<ul class="item2">
<
浏览 6提问于2020-02-20得票数 0
如果下拉选项被动态分配为事件的响应，则select选项始终是第一次触发该事件时的第一个选项，并且在所有下一次执行中，所选选项都是正确的。如果使用空闲时间，则行为是预期的。
运行stackblitz示例并在按钮中单击以确认预选是错误的(总是列表的第一个元素)，但是第二次(以及之后的所有其他时间)正确的值被绑定。另一个“奇怪”的事实是，如果我们注释指定预选项的行并取消对setTimeout()行的注释(这意味着在非常短的空闲时间后执行赋值)，它就会像预期的那样工作。
我应该如何做绑定，避免空闲时间？
import { Component } from '@angular/core'
浏览 21提问于2022-11-22得票数 0
我想更改ng-multiselect-dropdown中的css。
<ng-multiselect-dropdown
[placeholder]="'Choose'"
[data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(o
浏览 2提问于2018-10-29得票数 4
当值是一个对象数组时，我不能在ng-options(键，值)对中做预选，尽管如果我使用value.property，我可以做预选。
我用jsfiddle编写了一个示例，我可以按键或value.property预选ng选项，但在我的例子中，我需要整个数组
编辑：我编辑因为键，值是[键，ArrayObject]而不是键，对象。我还添加了一个新的html选择代码，以显示基于给定答案的正确选择。
请注意，您必须传递到ng模型的整组数组，尽管跟踪只是检查数组零。这两种结构应该是相同的。
<div ng-app="myApp" ng-controller="demoCtr
浏览 3提问于2016-10-13得票数 0
回答已采纳
这是我在html中为ng-multiselect-dropdown编写的代码： <div class="form-group" *ngIf="paisActivo != '-1'">
<ng-multiselect-dropdown
[placeholder]="'[Seleccione Marca]'"
[data]="dataMarcas"
[(ngModel)]="adminTresAc
浏览 30提问于2019-06-04得票数 0
回答已采纳
在CI-CD步骤(发布)中运行ng build命令时，我们得到以下错误。
./node_modules/ng-multiselect-dropdown/fesm5/ng-multiselect-dropdown.js模块生成失败(来自
./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack- loader.js)：TypeError:无法读取未定义的属性“类别”
这里是我的package.json，以供依赖关系参考。
{
"name": "XYZ",
"
浏览 2提问于2019-10-30得票数 9
回答已采纳
如何使ng-multiselect-dropdown成为必需字段，该字段必须至少接受一个选定的项？
<ng-multiselect-dropdown
[placeholder]="'Select countries'"
[data]="countries"
[(ngModel)]="countriesSelectedItems"
[settings]="countriesDropdownSettings"
(onSelect)="onItemSelect($ev
浏览 0提问于2019-06-02得票数 2
模板
<ng-multiselect-dropdown #Name [placeholder]="'Name'" [data]="data"
formControlName="name" [settings]="myNameTexts"(onDeSelectAll)="onNameDeSelect($this)">
</ng-multiselect-dropdown>
组件
document.getElementById("#Name").
浏览 2提问于2019-08-27得票数 3
回答已采纳
我面临的问题是预选一个动态填充下拉列表中的条目。
这是关于一个选择语言的文件。可能的语言是动态填充的。我希望有一个预选的值作为提示，它不包括在这个列表中。例如。“选择语言”
下面是我认为可能有用的代码：
<select id="languageSelection" class="form-control" [(ngModel)]="selectedLanguage" (ngModelChange)="onLanguageChange($event)">
<option selected disabled
浏览 1提问于2017-02-27得票数 2
回答已采纳
我有两个多选下拉状态和区域，我为状态选择了多个值，并根据该区域下拉列表数据正在更新，我根据该区域选择区域。
当我取消选择任何状态时，从该状态选择的区域没有取消选择。
<ng-multiselect-dropdown #multiSelect [placeholder]="'Select State'" [data]="states" [settings]="settings" formControlName="state" class="multiselect-dropdown-list" (
浏览 0提问于2020-12-17得票数 0
我需要通过post从角度UI发送对象到REST。在角度UI中，我使用ng-multiselect-dropdown组件从多选择下拉列表中捕获dealid。DealApi类的deal对象如下所示：
export class DealApi{
applicationReceived: any;
dealid: number;
expectedReleaseDate: Date;
plannedRatingCommitteeDate: Date;
priority: any;
releaseTimeCri
浏览 6提问于2020-04-23得票数 0
回答已采纳
下面是我的自定义管道，其中我无法访问类型为Item的customfilter数组的成员。
import { Pipe, PipeTransform } from '@angular/core';
import {Bus} from '/home/pavan/Desktop/Pavan/apstrtcAngular/src/app/Bus';
import { Item } from './Item';
@Pipe({
name: 'busFilter'
})
export class BusFilterPipe im
浏览 0提问于2018-11-01得票数 1
在页面加载时，如何使标签在其选择框中被预选？到目前为止，这是我的代码：
HTML：
<select class="selectBox operatingSystems" multiple="multiple">
<option>Windows</option>
<option>OSX</option>
<option>Linux</option>
</select>
联署材料：
$(".operatingSystems").se
浏览 1提问于2015-03-13得票数 0
回答已采纳
我正在尝试制作一个具有多选下拉菜单的组件。当我创建这个组件的一个实例时，我想向它传递一个对象列表(在我的例子中是ICatagory)，以显示为选项。我还想向它传递一个与预选值相同的对象列表(在我的例子中是ICatagory)。 到目前为止，我可以向它传递对象列表，它将它显示为选项，我还可以向它传递我想要的preSelected值。但是，即使我可以传递preSelected，它也不会将这些值显示为选中状态。 https://stackblitz.com/edit/angular-aryu5y 这是我为了澄清而进行的堆栈闪电战。注意:当它加载时，没有选择任何内容。我希望在创建时选择preSele
浏览 23提问于2019-10-11得票数 1
回答已采纳
身材魁梧的新手。过滤通过数据服务返回的json数据，并通过下拉列表完成筛选。我想做的是把这些事情结合起来：
我想删除最初的空白值返回通过角；
我还想让它预选一个默认情况下不包括在我的数据对象中的值(在我的例子中，返回所有对象，通过html作为select option添加)；
我希望在呈现页面时显示该初始默认值。
我可以删除最初的空白，但无法将包含的选项合并起来。
我已经研究过使用ng-repeat和ng-options来完成这个任务，并且可以通过ng-options将默认值设置为json中的一个对象，但这似乎不允许我添加一个数据中不存在的选项。由于我没有一个返回所有值的组
浏览 4提问于2016-03-16得票数 0
回答已采纳
3回答
我想重新设置纳克多选择下拉列表。有必要把它写成一种形式吗？
密码-
app.component.html
<div>
<p id = "node">Select a Root API Object - </p>
<p style="width:50%">
<ng-multiselect-dropdown [placeholder]="'Select Root API Object'" [data]="dropdownListRoot" [(ngM
浏览 0提问于2018-11-02得票数 6
回答已采纳
我有一个json，其中将有一个动态数据。因此，我循环通过ngfor和内部ngfor我需要一个带有搜索功能和多重选择的下拉列表。所以我使用ng-multiselect-dropdown。 下面是我的stackblitz试用代码--> click here <div class="row" *ngFor="let abc of dropdownList1; let i = index">
{{abc.Meteritem_text}} <ng-multiselect-dropdown [placeholder]="'
浏览 20提问于2021-04-27得票数 1
回答已采纳
当SSIS无法读取excel文件中的列尾时，我遇到了一个问题，如下所示(预选id)：
我试着通过编辑OpenRowSet for Excel Source (数据流)来解决这个问题，但它仍然不起作用。
我的临时解决办法是在每个excel文件上单击“启用编辑”按钮，然后成功读取预选Id列。
我在这个问题上的目标是，在受保护模式下，每个excel文件都应该由SSIS读取。
请给出任何想法来解决这个问题。谢谢..。
浏览 0提问于2019-03-06得票数 2
在角(6)项目中，我使用一个名为ng-multiselect-dropdown的节点包作为下拉输入字段。我面临在下拉列表中加载动态数据的困难。是否有任何方法加载动态数据，同时使用ng-多选择下拉，或是否有任何类似的节点包，提供了相同的功能ng-多选择下拉。
谢谢。
<ng-multiselect-dropdown [data]="userDropdownList"
[(ngModel)]="selectedItems" [settings]="dropdownSettings"
(onSelect)="onItemSel
浏览 0提问于2019-01-01得票数 0
下面是示例代码，以创建多选择下拉列表
<ng-multiselect-dropdown [placeholder]="'Select'"
[data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($ev
浏览 0提问于2019-02-08得票数 2
回答已采纳
实际上，我有两个页面，productList页面和productDetail页面，为了查看单个产品的详细信息，我对产品列表中的每个产品都有视图按钮。就像下面，
A | B | C | Action
---------------------------
aaa | bbb | ccc | View
abc | def | ghi | View
另外，我对列表页面中的每个字段都有过滤。例如，为了过滤字段"A“，我使用了普通选择，对于"B”，我使用了多选择下拉列表，ng-multiselect-d
浏览 3提问于2020-01-20得票数 0
我想使用ng-重复进行多选复选框。如果我没有预选的复选框，它就能正常工作。但是，当我预选了复选框，那么它的行为是完全不寻常的。
<div ng-repeat="account in accounts">
<input ng-model="selectedAccounts[account.id]"
ng-checked="{{account.lastchecked}}" type="checkbox">
</div>
在Controller
浏览 13提问于2016-05-03得票数 0
回答已采纳
1回答
我使用的是ng-multiselect-dropdown，当单击对象本身内的取消选择选项时，下拉列表清除选定的项(直观和可变)。
在以编程方式清除selectedItems时，变量数组本身将被清除，但可视部分中的选定项仍将被选中。如果要单击对象中的值，则该值将不再作为选定内容可用，但在视觉上该对象并不清楚。
我已经尝试了几个选项，我将在这里显示在下面。我还尝试将其放入表单中，然后手动清除control.In，如果没有从下拉列表本身提取deselectingAll，则可视部分保持缓存，selectedItems为空。
表格：
<form [formGroup]="multi
浏览 6提问于2022-07-07得票数 0
当我试图发布我的项目时，我得到了下面的错误。../node_modules/ng-multiselect-dropdown/ng-multiselect-dropdown.d.ts，找到版本4，预期为3。我正在使用环形4。如何解决此问题？我重新安装了npm，但它仍然存在。 在package.json中，它是"ng-multiselect-dropdown"："^0.2.3"，
浏览 17提问于2019-06-14得票数 0
2回答
我想通过复选框选择angular 6中的多个值。在这里，我在下拉列表中选择了部门，与该部门相关的员工列在另一个带有复选框的下拉框中。这就是这个过程，但实际上数组的最后一个值只显示在下拉列表中，我使用ng-multiselect-dropdown来选择多个值
{
"content":[
{
"userid":6,
"firstName":"Anns Jarigo",
"lastName":"PaulRaj",
&
浏览 0提问于2018-10-10得票数 0
在我的angular应用程序中，我使用了一个select控件，让用户在*ngFor循环中进行选择。对于第一次调用(或直到用户设置了实际值)，选择是空的，一旦做出选择，他们可以更改该值，但不能将其设置回“空”。这就是它的设计和工作方式，直到angular 8。 在ng8之前，我的代码看起来是这样的，只要someValue为空，select控件中就没有预先选择的条目： <select [value]="someValue" (change)="onSelectionDataChanged($event.target.value)">
<opt
浏览 14提问于2020-01-28得票数 1
回答已采纳
1回答
比较ng内部的两个不同对象的最佳方法是什么-重复，为什么angular.equals在这里不适用于我：
<tr ng-repeat="row in ctrl.filteredItems" ng-class="{'active':angular.equals(row,ctrl.ngModel), 'focus': angular.equals(row,ctrl.focusedRow)}">
<td ng-repeat="value in ctrl.sort(row) track by $inde
浏览 4提问于2016-03-29得票数 0
回答已采纳
对于关联的对象实例，我有以下选择：
<%= f.select :shop_id, Shop.all.map {|shop| [shop.name, shop.id]} %>
我希望动态地预选其中一个选项值，即不时地不同。
我试过其他答案(如)中给出的内容，但什么也没有发生。
如何从ID中预选选项值？
浏览 4提问于2013-08-27得票数 0
回答已采纳
我一直在尝试为angularJS设置默认的预选选项，但由于某些原因，我做不到。
以下是相关代码：
<select
ng-model="selectedOption"
ng-options="option.value as option.name for option in options">
</select>
我尝试过ng-init和许多不同的方法；我想不出如何使最高选项成为预选的选项。
浏览 7提问于2016-11-03得票数 2
回答已采纳
我想让noreferrer noopener value在rel_list中预选，而不是noopener。
我想插件选择默认值是有某种顺序的。
尝试添加一个数字，按字母顺序开始标题，但我总是得到预选的noopener值。
rel_list: [
{title: 'noopener', value: 'noopener'},
{title: 'nofollow noreferrer noopener', value: 'nofollow noreferrer noopener'}
],
浏览 4提问于2021-10-29得票数 0
1回答
我在Angular.js中使用实现了所选择的插件
我能够获取值，现在我想要选定的值作为预选的在选定的下拉列表中。
有人能告诉我做这件事的简单方法吗。样本代码：
<select name="SelectedName" id="SelectedName" data-placeholder="Choose a Name..." chosen
ng-model="Info.SelectedNameModel"
ng-options="jd.Name for jd in Info.List
浏览 0提问于2015-09-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
