angular 的 select 中 ng-options 设置默认值（angular select设置默认选中）

25-03-03 10

在这篇文章中，我们将为您详细介绍angular的select中ng-options设置默认值的内容，并且讨论关于angularselect设置默认选中的相关问题。此外，我们还会涉及一些关于Angula

在这篇文章中，我们将为您详细介绍angular 的 select 中 ng-options 设置默认值的内容，并且讨论关于angular select设置默认选中的相关问题。此外，我们还会涉及一些关于Angular 2 * ng对于select / option的性能问题、angular select 默认值的实例介绍、angular select 默认值设置方法、angular – 与Select / Options和ngModel / ngModelChange一起使用的异步管道的知识，以帮助您更全面地了解这个主题。

本文目录一览：

angular 的 select 中 ng-options 设置默认值（angular select设置默认选中）
Angular 2 * ng对于select / option的性能问题
angular select 默认值的实例介绍
angular select 默认值设置方法
angular – 与Select / Options和ngModel / ngModelChange一起使用的异步管道

angular 的 select 中 ng-options 设置默认值（angular select设置默认选中）

angular 的 select 中 ng-options 设置默认值

在AngularJS 开发的后台web系统中，经常需要对后台数据进行修改，而在修改数据的过程中，若页面中有select下拉框，需要让其选中原来的数据，即select中需要设置默认值。

默认值设置方法：

在select中使用ng-model绑定数据myColor，
在对应的controller中定义ng-model全局数据$scope.myColor，并为其赋值，该值即为select的默认值。

代码如下：

angular.module('myApp',[])
  .controller('MyController',['$scope'],function($scope) {
    $scope.colors = ['black','white','red','blue','yellow'];
    
    $scope.myColor = $scope.colors[2];
  })

<div ng-controller="MyController">
  <select ng-model="myColor" ng-options="color for color in colors"></select>
</div>

显示效果：

说明：该文档参考angular官方api

Angular 2 * ng对于select / option的性能问题

我正在使用* ngFor来填充< select>< / select>的选项.我的问题是我可以为我的6< select>中的1个拥有1000个数组值.表现很痛苦.我知道这是因为changeDetection或单向绑定.有没有办法更好地实现* ngFor for< option>.我实际上并不需要更改检测或单向绑定.

我的代码

<select [formControl]="requestForm.controls['SellcommodityId']">
   <option [value]="" disabled selected>commodity/GRADE</option>
   <option [value]="item.Id" *ngFor="let item of fieldOptions?.Product;">{{item.Value}}</option>                
</select>

更新12-20-2016

我将select放入其中的一个Component,如下所示：

import { Component,ChangeDetectionStrategy,Input } from '@angular/core';
/**
 * <ihda-select [list]="list" [control]="control" [titleOption]="title"></ihda-select>
 */
@Component({
  selector:'ihda-select',changeDetection:ChangeDetectionStrategy.OnPush,template:`
    <select [formControl]="control">
       <option [value]="" disabled selected>{{titleOption}}</option>
       <option [value]="item.Id" *ngFor="let item of list">{{item.Value}}</option>                
     </select>
  `,styleUrls: ['../app.component.css']
})
export class IHDASelect{
    @input() list: any[];
    @input() control: any;
    @input() titleOption: string;
}

性能问题持续存在.

看起来它不是changeDetection,因为我尝试从< select>中删除[formControl]属性.然后不再存在性能问题.似乎在此处使用[formControl]属性来跟踪表单组会导致性能问题.有关于此的信息吗？或者我如何解决它？

更新2016年12月21日

这里的plunker中显示的性能问题：

https://plnkr.co/edit/2jNKFotBRIIytcmLto7y?p=preview

如果单击“选项路径”,则需要很长时间才能加载选项.如果删除表单代码,则路由不会花费很长时间来加载.

当选择选项路线时,所有<选项>适用于所有< select>在应用程序再次响应之前一次性呈现.

为了避免渲染< options>可以延迟,以便它们只按需提供

<select [formControl]="control"(focus)="hasFocus = true">
   <option [value]="" disabled selected></option>
   <ng-container *ngIf="hasFocus">
     <option [value]="item.id" *ngFor="let item of list">{{item.value}}</option>                
   </ng-container>
</select>

https://plnkr.co/edit/KRgYHktFXHyPugS3nPQk?p=preview

该策略可以进一步优化,以便在已经为一个< select>显示该组件之后,通过计时器将hasFocus设置为真.一次,所以当浏览器空闲时,它已经呈现<选项> s.

angular select 默认值的实例介绍

今天又被一个angularjs的一个问题给难住了，有花了比较多的时间去解决

$scope.addalerts = [];    /* 查询 */
    $scope.proID = $stateParams.id;    if($scope.proID){
        GoodsModelService.goodsInfo({
            id:$scope.proID
        },function(result){            if(result.code == 1000){
                $scope.proDetail = result.data.goods_info;                //总分类
                $scope.goodsType = result.data.goods_type;                //得到分类的id，传到总分类，得到当前返回值
                $scope.goodsTypes = result.data.goods_info.type;                if( result.data.goods_info.goods_module){
                    $scope.addalerts = result.data.goods_info.goods_module;
                }else{
                    $scope.addalerts.push({
                        module_title:null,
                        module_desc:null,
                    });
                }
            }
        });

登录后复制

<div>
   <selectng-model="goodsTypes"  ng-options="g.id as g.name for g in goodsType">
       <!--<option value="">- 请选择 -</option>-->
   </select>
</div>

登录后复制

以上就是angular select 默认值的实例介绍的详细内容，更多请关注php中文网其它相关文章！

angular select 默认值设置方法

如下所示：

rush:xhtml;">

angular – 与Select / Options和ngModel / ngModelChange一起使用的异步管道

问题描述

我正在尝试使用asyncPipe和[ngModel] /(ngModelChange)使用可观察字段进行基于选择/选项的下拉列表工作.我的代码出了点问题,因为在运行时控制台会输出[object Object](请参见下图).

令我困惑的是,如果我使用[value] =“payPeriod.id”,它工作正常,并且在setSelectedPayPeriod(…)方面成功接收到数字ID.

component.html

<select [ngModel]="selectedPayPeriod | json" (ngModelChange)="setSelectedPayPeriod($event)">
    <option *ngFor="let payPeriod of (payPeriodList | async)" [value]="payPeriod">{{ payPeriod.endDate }}</option>
  </select>

component.ts

get payPeriodList(): Observable<PayPeriod[]> {
  return this._contextService.payPeriodList;
}

get selectedPayPeriod(): Observable<PayPeriod> {
  return this._contextService.selectedPayPeriod;
}

setSelectedPayPeriod(newValue: PayPeriod): void {
  console.warn(newValue);
  this._contextService.setSelectedPayPeriod(newValue);
}

控制台输出

歉意

对不起,我对plunker不是很熟悉,也无法快速找到我可以解决的Angular 2模板.

UPD.接受的解决方案 – 由AJT_82提供

>在选项元素上使用[ngValue]而不是[value].
>在select元素上使用[ngModel] =“selectedPayPeriod | async”而不是[ngModel] =“selectedPayPeriod | json”.

<select [ngModel]="selectedPayPeriod | async" (ngModelChange)="setSelectedPayPeriod($event)">
    <option *ngFor="let payPeriod of (payPeriodList | async)" [ngValue]="payPeriod">{{ payPeriod.endDate }}</option>
  </select>

解决方法

payPeriod是一个Object,因此如果要绑定整个对象,请使用[ngValue]而不是[value].

<option *ngFor="let payPeriod of (payPeriodList | async)" [ngValue]="payPeriod">{{ payPeriod.endDate }}</option>

关于angular 的 select 中 ng-options 设置默认值和angular select设置默认选中的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于Angular 2 * ng对于select / option的性能问题、angular select 默认值的实例介绍、angular select 默认值设置方法、angular – 与Select / Options和ngModel / ngModelChange一起使用的异步管道等相关知识的信息别忘了在本站进行查找喔。

本文标签：