Ng-即使我放置了ngModel，选择也不会分配默认值
Ng是Angular框架中的一个指令，用于实现双向数据绑定。当在HTML元素上使用ngModel指令时，可以将该元素的值与组件中的属性进行绑定，实现数据的双向同步。
在使用ngModel指令时，如果没有为其绑定一个初始值，选择框（如下拉列表）默认是不会分配默认值的。这是因为ngModel指令本身不会对数据进行初始化，它只负责数据的绑定和同步。
要为选择框分配默认值，可以在组件中的属性中设置一个初始值，然后将该属性与选择框绑定。例如，可以在组件的构造函数中初始化一个属性：
export class MyComponent {
selectedValue: string;
constructor() {
this.selectedValue = 'default';
}
}然后，在HTML模板中使用ngModel指令将该属性与选择框绑定：
<select [(ngModel)]="selectedValue">
<option value="default">Default Value</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>在上述代码中，选择框的默认值被设置为"Default Value"，因为在组件中的selectedValue属性被初始化为"default"。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙（Tencent Real-Time Rendering (TRTR)）：https://cloud.tencent.com/product/trtr
相关·内容
我正在使用ng-选择插件为我的角度项目。
我需要重新设置第二个下降在第一个下拉在改变。这是我的示例代码第一个下拉列表。
<ng-select [items]="branchModel" bindLabel="branchName" required
(change)="getPublicBankInfo($event); " name="branchName" bindValue="branchCode"
pla
浏览 2提问于2021-09-28得票数 0
回答已采纳
1回答
我试图为select/下拉列表创建一个包装器指令.但是无法将ngRepeat传递给指令。
return {
scope: { options: '=', ngModel: '=', ngRepeat: '=', textField: '@', valueField: '@' },
required: ['ngModel', 'ngRepeat', 'textField', 'valueField', '^form'],
浏览 0提问于2014-02-26得票数 0
回答已采纳
2回答
看这个：
<label>Business unit</label>
<select name="BU" class="form-control" [(ngModel)]="interventionForm.DLCODBUN">
<option *ngFor="let item of buList" >{{item.id}}</option>
</select>
当我打开相对网页时，复选框会
浏览 4提问于2017-10-10得票数 0
回答已采纳
使用Angular 5，我创建了一个带有选项的下拉列表，其中填充了来自Firebase的数据。即使选项已填充，除非我更改选项，否则我的ngModel是未定义的。如何才能在不更改为其他选项的情况下使用默认选项？
下面是HTML：
<select name="reviewer" [(ngModel)]="reviewer">
<option *ngFor="let editor of editors" [ngValue]="editor.$value">{{editor.$value}}</optio
浏览 3提问于2018-03-02得票数 0
9回答
是否可以以编程方式清除ng选择下拉列表的选择？我想要相同的行为，点击清晰的图标，但以编程方式触发。
我本来希望有一个clear()方法或类似的东西，但是没有类似的东西。
这是我的下拉代码：
<ng-select class="ng-select-wrap"
[searchFn]="multiTermSearch"
[items]="calculationOptions"
placeholder="Please select..."
浏览 2提问于2019-06-18得票数 31
回答已采纳
2回答
背景
我有一个包含用户电子邮件地址的输入字段的表单。我使用内插将电子邮件添加到placeholder字段。
问题
我不希望用户能够更改该领域的电子邮件地址。我只想让他们看到。但我确实想把它和表格一起贴出来。
问题
我一直在尝试不同的方式，无论form不post电子邮件。我怎样才能让它在表单为bind时，实际地post电子邮件地址？
示例
我和readonly试过了。这样，他们就无法改变它。
<input type="text" class="form-control" id="email" [(ngModel)]="persona
浏览 2提问于2016-11-30得票数 4
回答已采纳
我有一个带有所需属性的select标记，并附加了一个ngModel。在ngModel持久化时，有三个类表示标记的状态:ng-未触及，ng-原始，以及ng-有效(这是我的问题)。
我要的是ng-无效类，而不是ng-有效类。当ngModel的值为null (或空)时，ng无效就会出现，但不使用一些自定义值，比如0或0<。
下面是我的模板代码：
<label for="company-country">
<span>Country</span>
</label>
<select id="company-count
浏览 3提问于2017-02-26得票数 0
angular.module('RatingModule').component('starRating', {
templateUrl: 'rating.html',
controller: RatingCtrl,
bindings: {
maxStars: '=',
ngModel : '='
//上面是我想要在组件绑定中使用ngModel的组件
function RatingCtrl() { i want to use ngModel here }
//
浏览 0提问于2016-08-18得票数 2
2回答
带初始值的角度选择
、、、、
我想在材料选择中设置默认值/初始值。我尝试添加(值)=initialValaue，value=initialValue。但它们不起作用。我有一些建筑，我把它们列在表中。而且每一座建筑都没有几个侧翼(我将建筑分成几个部分，比如在医院，你可以看到建筑的不同部分)。我使用select do show all wing of building，这样用户就可以选择他想要的那一个。但是我希望在用户选择之前我已经选择了默认值。 <mat-form-field *ngIf="getSpecificPodZg(element.key).length" >
浏览 11提问于2021-08-22得票数 0
回答已采纳
1回答
不显示在角2中的下拉框的默认值
、、、、
我试图在我的下拉框中显示“选择颜色”作为默认值。选择颜色后，我希望此选项不可用。
下面是我使用的代码：
<select class="color-filter" [(ngModel)] = "selectedColor">
<option disabled selected value class="hideoption">Select a Color</option>
<option *ngFor="let c of color | mapToIterable" [v
浏览 3提问于2016-05-26得票数 1
回答已采纳
假设有一个Cmdlet类：
[System.Management.Automation.Cmdlet(System.Management.Automation.VerbsCommon.Get, "LogonToken")]
public class GetLogonToken : System.Management.Automation.Cmdlet
{
// constructor
public GetLogonToken()
{
// set default auth.
this.Authentication = "
浏览 5提问于2016-09-01得票数 3
回答已采纳
2回答
下面的代码正在执行它应该做的事情：
<div class="form-group">
<label for="file_name" class="col-sm-4 control-label">File names:</label>
<select id="file_name" class="col-sm-8" [(ngModel)]="fileName" name="file_name" required>
浏览 3提问于2019-02-22得票数 1
回答已采纳
1回答
我的问题是，在成功保存数据之后，表单中的一个字段将不被清除。我从另一个组件调用这个字段
我用this.addDiagnosisForm.reset();重置表单，并试图用(<HTMLInputElement>document.getElementById('diagnosisField')).remove;清除问题字段。但不是这样，因为场地没有完全清除。
<div class="form-row">
<label for="problemField" class="col-s
浏览 0提问于2019-04-10得票数 0
1回答
无法从内部指令更改ng-模型。
、、、、
我正在尝试创建一个指令，该指令从父html标记中更改ng-model，但它不起作用：
var app = angular.module('myApp',[]);
app.controller('ParentController',['$scope', function($scope) {
$scope.anyVar = "Anything";
$scope.list = ['It doesn\'t work','It also doesn\'t work'];
}]);
浏览 3提问于2015-07-15得票数 4
回答已采纳
1回答
我有一个使用*ngFor循环的下拉菜单，所有的选项都是数据绑定的。我尝试放入一个占位符，直到选择了一个选项，如果我使用第一组代码，占位符就会完美地显示出来，但是当我包含时，占位符就消失了。
注意: ngModel绑定到dropdown的索引，所以我可以使用它来过滤JSON文件，这就是为什么我还要运行一个索引。
我尝试使用'placeholder‘和'required placeholder’，并在for循环选项之前添加一个初始选项
带有工作占位符但没有ngModel的HTML代码
<label for="filter-coach-sel">Opt
浏览 5提问于2019-07-17得票数 0
回答已采纳
我已经创建了一个基本表单，它包含各种输入元素(主要是文本)，所有文本框都具有“必需”属性集和一个简单的regex模式。使用角2的表单指令，如果字段文本输入为空或未满足regex，则禁用按钮。这如预期的那样起作用。然而，抛到混合中的是一个带有2‘选项’子元素的'Select‘元素。第一个是我的默认值，第二个是我的数据绑定列表。如果初始值为：
<option value="default">Select a department...</option>
从组合框中选择。
我目前的问题是，如果我在所有文本框中输入有效数据，但将组合框保留为“选择一个部门
浏览 5提问于2017-03-15得票数 1
回答已采纳
我发现Design (DV)很不错，但是试图改变它自动将代码注入InitializeComponent的方式是非常困难的。有时它的自动代码破坏了程序。
例如，DV自动查看自定义UserControl的每个属性，然后将每个属性分配给InitializeComponent中的某个值。但我不希望它为某些属性赋值，因为如果使用不当，我的一些设置程序将抛出运行时异常。我可以手动更正InitializeComponent，但是每当我对设计进行更改时，SharpDevelop就会再次重新生成该函数。
还有一种情况是，默认的构造函数根据某些因素设置了大小，但是InitializeComponent会立即将其设
浏览 0提问于2011-01-18得票数 3
回答已采纳
我导入的数据机和文档上说的完全一样
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="date" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker" >
<di
浏览 0提问于2019-05-10得票数 1
回答已采纳
我有一个指令，它用图像模拟一个简单的复选框：
movieApp.directive("imageCheckbox",
function()
{
return {
restrict: "E",
scope: { ngModel: '=' },
template:
'<div ng-switch on="ngModel"> \
<div ng-switch-when="true"&g
浏览 2提问于2016-05-14得票数 0
1回答
离子3角离子幻灯片垂直对齐顶部
、、、、
我使用的是ionic 3 ion-slides和ion-slide。我面临的问题是内容在中间，我希望它是顶部对齐的。代码看起来像这样：
<ion-content padding>
<ion-slides pager>
<ion-slide style="vertical-align:top">
<ion-card padding>
<ion-card-header class="ha-card-header">About you</i
浏览 0提问于2017-07-27得票数 8
回答已采纳
3回答
我想在下拉列表中设置一个默认值，但我似乎无法这样做。
<div class="form-group">
<select id="interfaceType" (ngModelChange)="onChange($event)" [(ngModel)]="interfacengmodel" #interfaceType="ngModel"
name="interfaceType" class="form-control" required >
浏览 1提问于2019-01-10得票数 0
回答已采纳
2回答
有人能帮我解决在ng-重复中编译指令时的范围问题吗？
自定义指令input-by-type可以根据变量类型用适当的<input>替换<div> --直到在ng-repeat中使用才能正常工作。
正如您在plnkr示例中看到的那样，该指令按照预期的方式工作，直到在ng-repeat中使用为止。
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = {};
$scope.inp
浏览 8提问于2017-03-08得票数 2
回答已采纳
我通过遵循这个ng2-auto-complete实现了角2 组件。您也可以从访问它。
我面临的问题是，我的源是以id作为字段之一的对象的形式。通过遵循组件的实现示例，id将显示在下拉列表中的括号中。是否有一种方法不显示下拉列表中的id？
以下是自动完成组件的HTML代码：
<input ng2-auto-complete id="inputEvent" class="form-control" [(ngModel)]="model" ngModel
name="event" #event="ngModel&
浏览 1提问于2016-10-21得票数 3
回答已采纳
我有一个在URL中有id的视图。加载此视图时，我调用服务并获取所有用户数据，看起来类似于。 {
"code": 0,
"message": "",
"body": {
"id": 1,
"name": "test",
"profile": [
{
"id": 2,
"descripti
浏览 23提问于2019-01-11得票数 0
1回答
我已经做了一个DatePickerDirective，它按要求工作得很好。但是为了同步这个指令所在的特定输入字段的值，我必须同时使用value和ngModel属性。我希望只使用ngModel，如何才能优雅地实现这一点。
表单元素
<input appDatePicker type="text" required name="title" value="{{holiday.off_date}}" [(ngModel)]="holiday.off_date" class="form-control"
浏览 0提问于2018-04-14得票数 1
1回答
我遇到了一个同步问题，当我试图使用在ng-重复块内预先键入的UI-引导程序。当我的打字机被另一个指令呈现时，就会出现这个问题。
基本上，我试图在一个表单中创建一个动态的打字机数组。用户可以随意添加和删除打字机。
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<h4>Array of typeaheads</h4>
<div class="row" ng-repeat="item in items track by $ind
浏览 0提问于2014-10-20得票数 1
回答已采纳
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
回答已采纳
<select class="example-full-width js-example-basic-single" #country name="country" [(ngModel)]="companycountryValue" required>
<option *ngFor="let country of countrydata" [value]="country.name">{{ country.value }}</option>
</select>
如
浏览 1提问于2019-01-29得票数 0
回答已采纳
1回答
目前我有一个显示结果列表的bootstrap表。我有一个按钮，当按下这个按钮时，我希望在当前表格的底部显示一个新的行和输入。我遇到的问题是，我的子组件中的html没有保留我的父组件的引导表的格式(所有三个<td>行都被塞进了父表的一列中)。下面是我的父组件。子组件选择器是<app-addBin>。有人知道如何使子组件保留父组件表的格式吗？
<table class = 'table'>
<thead><!--Start of affected code-->
浏览 5提问于2018-08-23得票数 0
回答已采纳
2回答
我有一个非常简单的界面：
(models.ts)
export interface User{
Id : number;
FirstName : string;
LastName : string;
Email: string;
PhoneNumber: string;
}
还有一种非常简单的形式：
(app.component.html)
<fieldset class='form-group' >
<h2>Create New User</h2>
<label>First Name: <input type=&
浏览 8提问于2017-11-02得票数 4
回答已采纳
我有一个<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
回答已采纳
5回答
我用的是离子4。
我想在离子选择选项中显示一个默认值。
选项的值来自服务器。
API工作所有的值显示，但点击离子选择。
但我想显示默认值。
我已经在构造函数中初始化了userData.business_type。
我已经更新了我的问题，你可以看到。
当我的页面加载时，没有显示在离子中的值，选择只显示下拉按钮，但是当我单击下拉按钮时，则显示值。
但是，当页面对用户可见时，我希望默认情况下显示第一个值。
响应
{"success":1,"service_details":[{"id":"1","name":"
浏览 10提问于2020-03-17得票数 1
我正在做一个角度项目，它有一个形式的日历选择器。我选择了‘ng-挑选日期时间’()来实现跨浏览器日历兼容性。
我成功地实现了日历。问题是如何完全禁用/阻止它(当某些用户处于表单中时，我需要这样做)。现在发生的情况是，在模板标记中禁用时，输入字段将被正确禁用，因此无法在其中写入日期。
但是，字段的右侧有一个十字，从未禁用，因此用户总是能够单击该十字并擦除日期，每当日历被禁用与否时，将输入设置为null。
我的html模板代码如下：
<div class="input-control col-sm-6" [class.has-error]="endDate.inval
浏览 1提问于2017-11-15得票数 1
回答已采纳
我无法拿出一个合适的标题来解决我所面临的问题。因此，我会尽量详细解释这个问题。
我定义了一个类，比如Model.ts
export class Model{
a:ObjA;
b:ObjB;
c:ObjC;
d:string;
e:boolean;
constructor(){
this.a = new ObjA();
this.b = new ObjB();
this.c = new ObjC();
}
}
对于问题ObjA.ts，子类保持简单。
export class ObjA{
浏览 3提问于2017-06-13得票数 4
回答已采纳
2回答
我正在使用ngTemplateOutlet加载。但是它多次加载一个模板，.It加载了正确的模板，但是它执行了多次loadTemplate()方法。
在HTML中
<table>
<thead>
</thead>
<tbody>
<ng-template [ngTemplateOutlet]="loadTemplate()"></ng-template>
</tbody>
</table>
<ng-template #templa
浏览 7提问于2018-01-04得票数 5
回答已采纳
我的要求是获得ngModel和ng-template
这就是我如何访问ng-template的方式
@Component({
selector: 'sample',
template: `<ng-template [ngTemplateOutlet]="container"></ng-template>`
})
@ContentChild('container') container: TemplateRef<any>;
上面的代码提供了对ng-template的访问，我可以在ngTemplateOut
浏览 2提问于2020-06-04得票数 0
回答已采纳
1回答
我正在使用AngularjsVersion1.5来验证我表单中的输入。
ng-required用于验证所需的所有输入。
但是，它不能使用呈现组合体的自定义指令。组合体根据传递给它的名为'listId‘的参数检索项。然后，它使用ng-重复在'lookupItems‘上迭代。我想是缺少了一些东西，比如ngModel。为什么和如何实施它？
组合框指令：
app.directive('combo', function($http) {
return {
restrict: 'AE',
template:
浏览 3提问于2016-03-27得票数 4
回答已采纳
我在JSP页面中使用了spring表单输入标记。属性使用hibernate映射文件进行映射
<td>Package<form:input path="commandObject[${loop.index}].name"/></td>
我的数据库中有一些默认值。我想在用户呈现表单时显示默认值。对这些值的修改应该保存为数据库中的新行。
我怎样才能做到这一点！提前感谢！
浏览 4提问于2012-10-12得票数 1
回答已采纳
我已经为文件上传制定了一个指令。当我尝试只上传相同的文件时，上传后的对话框不显示。我不知道如何才能每次打开下一个对话框。
export function fileReaderDirective() {
'ngInject';
let directive = {
restrict: 'A',
require: '?ngModel',
link: fileReaderLink
};
return directive;
}
function fileReaderLink(scope, element, at
浏览 0提问于2016-09-07得票数 0
给出一群人：
let people = [...]
我想用角度写一个下拉列表，您从列表中选择一个人，然后从一个生成的输入框中动态地更改他们的名字。
我有以下代码片段：
<select [(ngModel)]="personIndex">
<option *ngFor="let p of people" [value]="findIndexOfPerson(p.id)">
{{p.name}}
</option>
</select>
<input placehold
浏览 0提问于2018-12-25得票数 2
回答已采纳
我试图为我的下拉多个选项做一个占位符使用角和引导。但看来我做错了。我为please select这样的占位符做了一个选择，并将它放在顶部，但是直到我第一次提交时它才会显示出来。
<label>Question</label><br>
<select #question="ngModel" name="question" [(ngModel)]="AppService.selectedquestion.question" class="empty form-control">
浏览 0提问于2018-01-05得票数 2
回答已采纳
1回答
我使用ng-options选择与列表绑定的元素。我有一个自定义指令，它将验证指令添加到select元素。此自定义指令编译select元素。编译select元素后，将复制这些选项。有没有办法停止重复或者至少在编译前清除它们？
在下面的代码中，元数据是一个自定义指令。在该指令中，我有编译($el)($scope)行。执行此行后，select将如下所示
请选择性别
男性
女性
男性
女性
function ($scope, $el, $attr, $ngModel) {
if (!$ngModel) {
return;
}
var elementMet
浏览 2提问于2018-02-20得票数 0
我面临着使用嵌套属性接口的问题。
//Food Interface (food.interface.ts)//
export interface Food {
name: string;
quantity?: string;
description?: string;
nutrients?: {
calories?: number;
protein?: number;
carbs?: number;
fats?: number;
};
}
food.component.html
<input type="number" placeholder=
浏览 0提问于2018-04-12得票数 1
回答已采纳
我有一个相当简单的angularjs组件，它有一个可选的高度绑定： "use strict";
angular
.module("app")
.component("myComp", getComp());
function getComp() {
return {
bindings: getBindings(),
template: getTemplate(),
require: "ngModel",
controller,
};
}
function getBinding
浏览 25提问于2021-06-17得票数 0
回答已采纳
3回答
我需要验证用户输入与以下验证，并应不允许用户提交表单，直到验证错误消息被清除 下面是我的代码需要执行的验证。1)字符串将为字母数字。2)字符串长度不应超过7个3)字符串应为"w123456"(w后跟6个数字)或"df12345"(df后跟5个数字)模式之一 有人能帮我验证一下吗？ Contact: <textarea required ngModel name="contacts" #contacts='ngModel' placeholder="Enter Valid contactid" ngM
浏览 30提问于2019-02-24得票数 0
在angular2中，它面临选择选项的问题。它不是由default.It选择和显示的，而是在IE浏览器中工作，而在其他浏览器中不工作。
country.html：
<label class="control-label col-sm-offset-1 col-sm-2 bodySmall" for="country">Country:</label>
<div class="col-sm-3" [ngClass]="{ 'has-error': countr
浏览 0提问于2017-04-10得票数 3
回答已采纳
我使用下面的代码将object[]绑定到Angular 2.0 (RC1)中的选择列表。问题是，最初在呈现选择列表时，它没有预先选择适当的值/索引。
在下面的代码示例中，"ma“是组件的实际类变量。ma有一个SelectedItemType属性，它是myItemTypes对象数组中的一个对象。
<select class="form-control" [(ngModel)]="ma.SelectedItemType">
<option *ngFor='let item of myItemTypes'
浏览 5提问于2016-06-20得票数 3
*ngIf="currentIdea.oetSupportNeeded"我有一个包含两个值的下拉列表- yes和no，以及另一个输入标签，您可以在其中自由编写。我希望仅当用户在下拉列表中选择“是”时才显示input-label，并在选择“否”时隐藏它。
我的问题是，下面的代码只工作一次-当页面加载时选择"no“，输入标签被隐藏，但当你选择"yes”然后再次选择"no“时，标签就会显示出来，不再消失。我想让它根据用户的选择打开/关闭
我尝试过使用ngShow、ngHide、[disabled]等，但都没有用
<div class="selec
浏览 0提问于2019-06-27得票数 2
我正在运行一个Erlang应用程序，该应用程序经常将数百万条记录写入mnesia表，用于创建调度程序。当时间到期时，记录将被执行并从表中删除。表配置了{type, disk_copies}, {type, ordered_set}。我使用事务操作编写记录，使用脏操作删除记录。
我做了一个实验，写了200万条记录，然后把它们全部删除:内存在完成后没有被回收。当我开始删除这些记录时，有一个峰值会增加两倍的内存。例如，beam内存从75 as开始，在410 as的实验之后变为。我使用erlang:memory()检查了内存的前后，发现内存被process_used and binary吃掉了，但实际
浏览 3提问于2021-06-30得票数 3
回答已采纳
1回答
我试图在一个条件下禁用一个按钮，不管一个对象是否是空的。在这种情况下，对象selectedTopics应该等于{}。
register.ts
ngOnInit() {
this.topicRequestAnswer = {topics:[]};
this.selectedTopics = {}; // <- setting equal to {} here
this.requestTopics();
}
register.html
<ion-content class="ion-padding">
<form #f
浏览 3提问于2020-07-27得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
