如何将ngModel值绑定到可选择搜索的选项中？
将ngModel值绑定到可选择搜索的选项中，可以使用Angular框架中的ng-select组件来实现。
ng-select是一个强大的下拉选择框组件，它支持搜索、多选、自定义模板等功能。要将ngModel值绑定到ng-select中的选项中，可以按照以下步骤进行操作：
- 首先，确保已经在项目中引入了ng-select组件。可以通过在项目的package.json文件中添加依赖项来安装ng-select，然后在需要使用的模块中导入该组件。
- 在HTML模板中，使用ng-select标签创建一个下拉选择框，并使用[(ngModel)]指令将ngModel值与选项进行双向绑定。例如：
<ng-select [(ngModel)]="selectedOption">
<ng-option *ngFor="let option of options" [value]="option">{{ option }}</ng-option>
</ng-select>在上述代码中，selectedOption是一个在组件中定义的变量，用于存储用户选择的选项。options是一个数组，包含了可供选择的选项列表。ng-option标签用于定义每个选项，并使用[value]属性将选项的值绑定到ngModel。
- 在组件的Typescript文件中，定义selectedOption和options变量，并初始化它们的值。例如：
selectedOption: any;
options: string[] = ['Option 1', 'Option 2', 'Option 3'];在上述代码中，options变量是一个字符串数组，包含了三个可供选择的选项。
通过以上步骤，就可以将ngModel值绑定到可选择搜索的选项中。当用户选择一个选项时，selectedOption变量的值会自动更新。你可以在组件中使用selectedOption变量来获取用户选择的值，并进行相应的处理。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
腾讯云云服务器（CVM）是一种可弹性伸缩的云服务器，提供高性能、可靠稳定的计算能力。您可以根据业务需求选择不同配置的云服务器，并根据实际情况进行弹性调整。了解更多信息，请访问：腾讯云云服务器
腾讯云对象存储（COS）是一种安全、低成本、高可靠的云存储服务，适用于存储和处理各种类型的数据。您可以将文件、图片、视频等数据存储在COS中，并通过简单的API进行访问和管理。了解更多信息，请访问：腾讯云对象存储
相关·内容
我已经建立了这样一个可以观察到的：
this.source$ = this.store$
.select(state => state.source);
在模板中：
<form>
<div class="form-group">
<input type="email" id="input-to" placeholder="To" [ngModel]="(source$ | async).customer" name="sender" c
浏览 3提问于2017-03-16得票数 1
我有一个选择框，通过它我可以将选定的值绑定到startingYear变量。我希望startingYear的类型在数字中。但它总是在字符串中。 如何将其转换为number？ console.log(StartingYear); <select [(ngModel)]="StartingYear">
<option *ngFor="let item of [0,1,2,3,4]; let i = index">
{{i}}
</option>
</s
浏览 3提问于2019-03-12得票数 1
回答已采纳
3回答
如何将输入文本绑定到跨innerHTML的Angular6中？
ts文件
...
finance_fullname: string;
...
模板文件
<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname" ngBind="finance_fullname"></span>
浏览 1提问于2018-09-30得票数 3
回答已采纳
1回答
我正在尝试将从端点获得的值赋值到复选框中。
这是对象
{sendOtpEmail: true}
我必须在端点响应中进行一些搜索，以区分电子邮件值返回还是手机值返回。
这是我的密码
TS
otpCellValue: any;
otpEmailValue: any;
getOTPChannel() {
this._loader.start();
this._subscriptions.push(this._corpService.getOTPChannel().subscribe((resp) => {
//get endpoint object
浏览 0提问于2020-12-01得票数 1
回答已采纳
我对双向数据绑定和类型安全性有一点怀疑。这是我的密码：
<ion-select [(ngModel)]="user.age">
<ion-option value="25">Noob</ion-option>
<ion-option value="37">Dynamic</ion-option>
<ion-option value="67">Samurai</ion-option>
</ion-select>
现在的问
浏览 1提问于2016-10-25得票数 0
回答已采纳
我目前了解到[(ngModel)]="expression"是从组件到视图的双向绑定，反之亦然。我还理解[ngModel]="expression"是单向绑定的(我相信从组件到视图？)还有可能出现(ngModel)="expression"。我对[ngModel]和(ngModel)之间的区别感到困惑。谁能解释一下吗？
编辑：在玩了一遍之后，查看了@Rohan给出的文档片段，我意识到像(ngModel)这样的东西应该使用语句，而不是表达式。尽管如此，是否有合适的时间使用类似(ngModel)之类的东西，或者在任何情况下都能工作呢？
浏览 4提问于2017-09-08得票数 17
回答已采纳
在对两个角形模块(FormsModule和ReactiveFormsModule)进行逆向工程之后，我将ngModel的三种用途作为指令中的输入。
在FormsModule中，在 ngModel 指令中只使用NgModel一次。'ngModel:not(formControlName):not(formControl)').是指令选择器的一部分(选择器: ngModel )因此，对于NgModel指令，ngModel有两个角色。这是一个输入，同时也是一个选择器。
在ReactiveFormsModule中，ngModel被使用了两次。第一个用法是在FormControlDire
浏览 8提问于2017-10-23得票数 1
回答已采纳
每次我尝试将数据发送到ts文件时，ngModel都会重置下拉菜单中的选择。
<select placeholder="select" class="custom-select" id="
{{entity.parameterDisplayName}}"
[(ngModel)]="entity.parameterValue"
name="{{entity.parameterDisplayName}}">
<option [value]="-1" [selected]
浏览 6提问于2020-12-01得票数 0
2回答
我将这个对象selectedTask双向绑定(ngModel)到<ion-select>标记.但是，当对selectedTask中字段的值进行更改时，Dom不会被更新以反映值的变化。
在这里，html部分：
<ion-label>Select Task</ion-label>
<ion-select [(ngModel)]="selectedTask" #A (ionChange)="updateChangedTask(false)">
<ion-option *ngFor="let ta
浏览 2提问于2019-04-15得票数 0
回答已采纳
1回答
我在我的Range2应用程序中使用PrimeNG作为UI库。在某个组件中，我需要有一个滑块组件。因此，我使用了相应的PrimeNG滑块组件，如下所示：
<p-slider [(ngModel)]="this.adjustedCalculation.predictionYear"></p-slider>
这工作得很好。
但是，我注意到这个组件在带有触摸屏的设备上被破坏了。所以我得找个替代者。
我遇到了标准的HTML5输入类型“范围”描述的，并添加了它的标记如下：
<input type="range" name="points
浏览 5提问于2017-01-17得票数 4
回答已采纳
2回答
jQuery旋钮渲染问题
、、、
我试图使用一个角度上的jquery旋钮，并创建了一个指令来使用它。
现在，我已经看到了许多jquery旋钮的例子，在其中的大多数例子中，在dial...but的中心都显示了当前的值，而不是我的例子！此外，我如何将数字设置为没有小数呢？
以下是我的html和角指令代码：
<knob ng-model="temp" value="0"></knob>
<input type="text" ng-model="temp">
knob.js
angular.module('knob',
浏览 0提问于2016-01-23得票数 0
回答已采纳
1回答
我有一个名为user的对象
let user = {};
如何将输入绑定到未定义的属性？例如。
<input [(ngModel)]="user.name" placeholder="Enter your name"></input>
每当用户输入他的名字时，我希望ngModel创建该对象的未定义属性，并产生以下结果：
user = {name: "John"};
这也可以在更深的层次上完成吗？例如。
<input [(ngModel)]="user.homeaddress.postcode" pla
浏览 40提问于2018-08-29得票数 5
1回答
角提供了几种将变量绑定到DOM属性的方法。您可以使用{{}}语法、[property]=expression或双向ngModel绑定.
我还没有找到一种相反的方法:将DOM绑定到组件变量。例如:如何将元素宽度绑定到在width文件中声明的component.ts属性。我知道从DOM到组件的唯一数据流是事件。
浏览 0提问于2017-10-23得票数 0
回答已采纳
我有一个<select>标记，它需要将multiple属性绑定到组件中的值。如果我这么做：
<select [multiple]="multiple" [(ngModel)]="model" id='sel' name='sel'>
<option *ngFor="let option of options" [ngValue]="option.value">{{option.label}} - {{option.value}}</option>
然后
浏览 5提问于2022-01-11得票数 1
回答已采纳
我有问题的ng-选择(我正在使用最新的版本和角10)。
我正在创建一个名为form-row-select-multiple的公共组件，我将在许多其他组件中使用该组件。以下是此组件的缩短TS文件：
@Input() options: any[] = [];
@Input() optionKey = 'id'; // in case of options object, specify prop
@Input() optionKeyText = 'name'; // in case of options object, specify prop to s
浏览 2提问于2020-08-04得票数 3
回答已采纳
我试图在*ngFor中为每个select选项设置模型，但如果选择任何选项，则所有选项都设置为相同的模型值。
我试图将模型值更改为[(ngModel)]="data.selectedItem"，但是添加级别的功能似乎会中断。
HTML:
<div class="row" *ngFor="let data of levels;let index = index">
<select [(ngModel)]="selectedItem" class="form-control input-sm cus
浏览 1提问于2017-11-06得票数 0
回答已采纳
我想在html表中动态添加一个td，里面有一个input，我想让输入具有ngModel属性，并如下所示：
<td><input type="number" name="Price" [(ngModel)]="Product.Price"></td>
我在ts中添加了td，如下所示：
td = document.createElement('td');
input = document.createElement('input');
input.setAttribute('
浏览 2提问于2021-06-06得票数 0
1回答
下面有一个带有这些值的下拉列表，当我第一次使用初始值时，它是未定义的。但是，在我更改为“30分钟”之后，返回到“任意”，我在ngModel中使用的属性将从30设置为“未定义”！它会被设置成一个字符串？
实际的属性如下所示-我没有意识到打字本会这样转换它？
length: number;
我的落脚点在哪里
<div class="form-group">
<label for="length">Length</label>
<select class="form-control w-100" i
浏览 4提问于2020-08-05得票数 1
回答已采纳
我正面临着一个奇怪的问题。
<select [(ngModel)]="selectedBudget.year" name="" class="form-control" id="">
<option value="2020">2020</option>
<option value="2021">2021</option>
</sel
浏览 3提问于2020-04-17得票数 0
回答已采纳
4回答
我有一个[disabled]输入，这取决于另一个输入的ngModel。最初，[disabled]正常工作，但当我们更改依赖项输入值时，[disabled]属性不起作用。如何在[disabled]属性上应用两个绑定？
下面是代码片段。
<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event">
<option value="0">Disabled</option>
<option value="0">Enabl
浏览 5提问于2017-06-01得票数 5
回答已采纳
我不能显示我的选择，我不明白为什么。我能从巡查员那里看到但它没有显示..。
首先，我试图从我的服务中获取数据，但是它没有工作，然后我尝试在表单组件中使用静态数据，但是它没有工作.在和模板中：
import { Component, Input, OnInit } from '@angular/core';
import { Route, Router } from '@angular/router';
import { Spot} from '../spot';
import { SpotService } from '../spot
浏览 3提问于2022-10-19得票数 0
我使用的是angular6 multi-select，它有一个来自ngOnInit上的角服务的对象数组中的项列表，它正在传递到multi-select中：
this.sensorTypes = [
{ label : "Power", value : "P"},
{ label : "Current", value : "C"},
{ label : "Voltage", value : "V"}
]
在默认情况下，我希望在表单加载时在multi-select中设置2个值。为此，我将ng
浏览 1提问于2019-02-21得票数 18
回答已采纳
3回答
使用Angular 4，我有一个html模板，我想要一个有两个选项的选择框。默认情况下，应预先选择其中一个选项。
<select name="rate" #rate="ngModel" ngModel required>
<option selected value="hr">hr</option>
<option value="yr">yr</option>
</select>
详细信息：
我分配了#rate="ngModel"
浏览 2提问于2017-10-14得票数 10
回答已采纳
我在Angular 6中遇到了一个问题:如果我使用一个基于<select>元素(组合框)的组件，如果我以经典的方式使用它，一切都会正常工作(请注意，我使用了selected属性:结果是默认选项在模板中已经显示为选中状态，正如我所预期的那样！)：
<select data-width="200px" title="title" name = "name"
>
<option value='default' selected>Default</option>
<option
浏览 0提问于2018-12-05得票数 1
如何将json 'oup'值从子组件更新到父组件。当我尝试用输出事件更新子模型的值到父组件时，没有任何效果。
我给出了下面的所有细节
处理的数据：
json: [{
"inp": "hello",
"oup": "fello"
}]
父组件
// Parent Component
@Component({
selector: 'parent',
template: `
<div>Parent sharedVarParent: {{shar
浏览 7提问于2016-08-04得票数 2
3回答
我有一个mat-select下拉列表，并启用了多个，并使用NgModel来存储用户选择的值。
问题是，当我导航到另一个页面并返回时，用户选择的值不在mat-select中。我知道ngModel有这些值……我遗漏了一些东西……
HTML
<mat-form-field>
<mat-select placeholder="Customers" name="customerDetails" ngDefaultControl
formControlName="customerDetails" [(ngModel)]=&
浏览 4提问于2017-10-10得票数 8
2回答
我有一个select标记，它动态地从一个governorate数据模型数组中获取它的选项，如下所示：
<select [(ngModel)]="selectedGov" (ngModelChange)="onUpdateGov($event)">
<option *ngFor="let gov of governorates">{{gov.code}}</option>
</select>
onUpdateGov方法：
onUpdateGov(newGov) {
console
浏览 6提问于2017-10-03得票数 0
回答已采纳
2回答
我注意到在我的角度应用中
[(ngModel)]="this.properties.offerValue"和[(ngModel)]="properties.offerValue"
他们两人的工作似乎是一样的，我的好奇心提出了一个问题，有什么区别，哪一个是正确的用法。
浏览 0提问于2018-08-21得票数 3
回答已采纳
我有两个<select>元素：
<select [(ngModel)]="model.SelectedSomeValue">
<option *ngFor="let someValue of model.SomeValues">{{ someValue }}</option>
</select>
<select [(ngModel)]="model.SelectedSomeValue.SelectedOtherValue">
<option *ngFo
浏览 6提问于2016-08-26得票数 0
回答已采纳
我是新的角度和材料2，我使用材料日期选择器在我的形式显示和选择日期。我能够选择日期并绑定到ngModel。但是当我试图将我的反应绑定到ngModel时，什么也没有显示出来。我已经将字符串日期转换为日期，然后绑定到ngModel。下面是密码，请帮我找到我失踪的地方。
<mat-form-field>
<input matInput id="dateOfBirth" name="dateOfBirth" [matDatepicker]="dateOfBirth"
class="form-contr
浏览 0提问于2018-02-25得票数 4
回答已采纳
我有一个咖啡馆模型，我想从咖啡馆列表中显示为默认值。以下是我的代码
<div class="form-group">
<label for="theme" style="margin-top: 20px;">Cafe Name</label>
<select class="form-control" [ngModel]="cafeList" (ngModelChange)="changeCafe($event)" name="cafe
浏览 0提问于2018-12-12得票数 3
你好，我最近冒险进入角和离子的发展。
我理解插值和属性绑定是将数据从一个类传递到另一个模板，插值只支持字符串，而属性绑定支持所有类型。
事件绑定用于将数据从模板传递到类。
利用foll实现了双向绑定。4种方式：
使用ngModel香蕉语法：
<input (ngModel)="username"> Hello {{username}}！
没有香蕉语法的NgModel：
<input ngModel="username“(ngModelChange)="username = $event"> Hel
浏览 0提问于2018-12-09得票数 6
回答已采纳
2回答
我对角很陌生，有点不知所措。
据我所知，我有一个组件，可以在其中显示像{{ this }}这样的数据，它工作得很好。现在，我想选择component.ts中的数据。它是一个字符串数组：
private strategies: string[] = ["ASAP", "W&T"];
现在，在我的component.html中，我想用这些字符串作为选项创建一个select。
<select ngModel="result" ngOptions="value for value in strategies">
<
浏览 0提问于2019-03-05得票数 3
回答已采纳
我有一个select，它的选项是用http请求生成的。当我得到答案并使用*ngFor设置options标记时，第一个结果在表单中显示为选中状态，但是查看ngModel时，它们没有选中任何值 html <select class="form-control" [(ngModel)]="filter.account">
<option *ngFor="let account of accounts">{{account.name}}</option>
</select> ts ngOnInit()
浏览 16提问于2019-02-04得票数 0
我不确定是否能理解在遍历一组选项以填充我的选择列表时得到的错误。
下面是我得到的错误
Error in ./PhonePage class PhonePage - caused by:
If ngModel is used within a form tag, either the name attribute must be set or the
form control must be defined as 'standalone' in ngModelOptions.
Example 1: <input [(ngModel)]="person.fi
浏览 7提问于2017-02-16得票数 0
回答已采纳
1回答
我认为在绑定select元素的尝试中有一个根本缺陷。
如果我将select绑定为so (ngModel)="selectedPrivilege“，则select以nothing selected开始。如果我删除了模型绑定，所选的属性就能工作，并选择适当的选项，但是如果没有模型绑定，(ngModelChange)就不再工作了。
我想我在这里做了件蠢事。
<div class="form-group">
<label for="privilegeDDL">Privilege</label>
&l
浏览 4提问于2017-11-07得票数 0
1回答
在我的angular应用程序中，我使用的是npm-hm carousel。我需要自动选择旋转木马中间的字段，就像照片中一样。但当我滚动转盘时，我还需要将其中一个i绑定到所选项目。
<ngx-hm-carousel [(ngModel)]="currentIndex" [show-num]="3" [infinite]="infinite" [drag-many]="true"
[aniTime]="200" [data]="selectedServiceO
浏览 11提问于2019-11-07得票数 0
问题是这个。如何将函数(响应)结果返回到ngModel.$asyncValidators.usernameAvailable。如果用户存在，$http.get中指定的url返回true，如果没有返回false。P.S. response.data返回正确的答案，我检查了。
app.directive('usernameAvailableValidator',['$http', function($http){
return{
restrict : 'A',
require : 'ngModel
浏览 0提问于2015-12-23得票数 1
回答已采纳
1回答
我为select输入创建了一个选择userId的指令。模型从指令绑定到视图的其余部分。但是，当我从控制器设置id时，它似乎没有绑定到选择指令中的输入。
主计长：
app.controller('MainCtrl', function($scope) {
// set userId to willem's Id
$scope.userId = 3;
});
指令：
app.directive('selectUser', function() {
return {
restrict: 'E',
scope: {
浏览 2提问于2015-03-22得票数 1
回答已采纳
1回答
我有一个使用*ngFor循环的下拉菜单，所有的选项都是数据绑定的。我尝试放入一个占位符，直到选择了一个选项，如果我使用第一组代码，占位符就会完美地显示出来，但是当我包含时，占位符就消失了。
注意: ngModel绑定到dropdown的索引，所以我可以使用它来过滤JSON文件，这就是为什么我还要运行一个索引。
我尝试使用'placeholder‘和'required placeholder’，并在for循环选项之前添加一个初始选项
带有工作占位符但没有ngModel的HTML代码
<label for="filter-coach-sel">Opt
浏览 5提问于2019-07-17得票数 0
回答已采纳
我希望将所选选项的文本设置为一个控制器变量，就像ngModel如何对所选选项的value属性这样做一样。
<div ng-controller="Subjects as ctrl">
<select ng-model="ctrl.model.fieldId" text-model="ctrl.model.fieldName">
<option value="1">yes</option>
<option value="2">no<
浏览 3提问于2015-11-11得票数 0
回答已采纳
我有一个这样的父组件。
<form [formGroup]="validateFormGroup">
<div>
<mat-form-field>
<input matInput placeholder="Name" maxlength="150" formControlName="name" required>
</mat-form-field>
浏览 1提问于2021-03-20得票数 0
回答已采纳
2回答
我正在编写一个AngularJS指令，并希望将ng模型值绑定到控制器中的对象数组。当数组中的任何内容发生更改时，我希望在指令链接中的$render被触发。实际上，只有在更改对数组的引用时才会触发$render。这是为什么，这是ngModelController的预期行为吗？
下面的代码演示了这种行为，也演示了这个小提琴：
<div ng-app="tryApp">
<div ng-controller="MyCtrl">
<div> Bound in controller: {{modelVals[0]
浏览 3提问于2014-02-26得票数 0
回答已采纳
我是AngularJs的初学者，但现在我已经使用并了解了AngularJs是如何工作的。
我想问的是ngModel指令文档中的几行代码。
这些线是：
注意: ngModel将通过计算当前作用域上的表达式来尝试绑定到给定的属性。如果该属性在此作用域上不存在，则将隐式创建该属性并将其添加到该范围中。
我不明白他们想说什么。我知道ngModel指令将一个属性绑定到input、select和textarea控件。就像下面一个非常简单的代码：
Name: <input type="text" ng-model="myName">
{{myName}}
浏览 0提问于2014-09-03得票数 1
回答已采纳
1回答
我正在尝试从下拉列表中获取所选item的索引值。
为了做到这一点，我正在尝试这样的代码：
<ion-select okText="Okay" cancelText="Dismiss" [(ngModel)]="dropdown1" (ionChange)="onSelectChange($event)" >
<ion-select-option *ngFor="let list of goalList;let i=index;" (ionSelect)=" myfun();
浏览 0提问于2020-04-17得票数 0
2回答
我有一个简单的搜索功能，用户可以搜索课程。用户目前能够添加搜索词，例如data、probability，这些搜索词被添加到称为searchTerms的组件属性中。
我在视图中使用*ngFor遍历searchTerms，希望用户能够通过单击术语旁边的✖来删除每个术语。我已经这样定义了removeTerm()方法：
removeTerm(term: string){
var index = this.searchTerms.indexOf('term');
if (index !== -1) this.searchTerms.splice(index, 1)
浏览 20提问于2018-08-02得票数 1
回答已采纳
我的模块中有两个指令。第一个来自。我第二次用它做模型。这两个指令表示输入字段，但第二个指令不存储值。链接函数不更新ng模型值。
link: function(scope, elem, attrs) {
if (!!attrs.ngModel) {
var assignDivision = $parse(attrs.ngModel).assign;
elem.bind('change', function(e) {
assignDivision(elem.val());
});
浏览 2提问于2013-11-19得票数 1
回答已采纳
我的ngx-引导单选按钮工作良好，并绑定到selectedValue，除非页面第一次加载。虽然selectedValue是初始化的，但是当第一次加载页面时，ngModel不会绑定到它。
我尝试在类和selectedValue ()中初始化OnInit成员，希望这是一个操作顺序问题，但是当页面加载时，ngModel仍然不会绑定。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'demo-buttons-radio',
templateUrl: '
浏览 0提问于2019-07-31得票数 0
回答已采纳
4回答
我使用了第三方下拉列表和日历组件，如果我更改值ngmodel值是错误的更新。它必须采用当前值而不是这个值，而是采用旧值。
样本：
如何将当前值更新为ngmodel.？请给出一个好的答案
复制程序：
1.运行示例链接
更改下拉值或日历值
3.请参阅控制台日志，使用参数获取当前值，但ngmodel显示旧值。
Html文件
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<ejs-datepicker id="d
浏览 0提问于2018-09-21得票数 3
回答已采纳
我希望使用角文档中提供的这个与(ngmodel)结合使用动态表单。以便动态窗体控件可以绑定到模型。
但是，当我尝试将控件绑定到(ngMode)时，我会看到错误消息
检查后，表达式发生了更改。以前的值：'false‘。现值：“真”。
是一个具有所做更改的示例柱塞。
我修改了QuestionBase类以保存密钥
export class QuestionBase<T>{
...
modelKey:string;
...
}
在QuestionService中，现在每个问题都有它应该更新的模型的名称。
new TextboxQues
浏览 3提问于2017-02-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
