Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了添加占位符以在angular2中选择标记大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个只包含表单的简单组件:
import {Component,FORM_DIRECTIVES,NgFor} from 'angular2/angular2';


@Component({
  SELEctor: 'test-component',directives: [FORM_DIRECTIVES,NgFor],template: `
    <form class="form-inline" (ng-submit)="onSubmit()" #form="form">
      <div class="form-group">
        <SELEct class="form-control" 
          [(ng-model)]="model.server" 
          ng-control="server" 
          #server="form" 
          required>
          <option SELEcted hidden>placeholder</option>
          <option *ng-for="#server of servers" 
            [value]="server">{{ server | uppercase }}
          </option>
        </SELEct>
      </div>
      <div class="form-group">
        <input class="btn btn-priMary" type="submit" value="Load"
          [disabled]="!form.form.valid">
      </div>
    </form>
  `
})
export class TESTComponent {
  public model: Model = new Model();
  public servers: String[] = ['a','b','c'];

  onSubmit(): void {
    // Complicated logic.

    // Reset form.
    this.model.reset();
  }
}

class Model {
  constructor(
    public server: String = ''
  ) { }

  reset(): void {
    this.server = '';
  }
}

我想为我的选择创建“占位符”,但是ng-model会覆盖所选属性,导致根本没有选择的选项.任何sugestions?我正在使用角度2.0.0-alpha.48.

我通过执行以下操作来实现此目的:
enter code here

<div class="form-group">
  <label for="metricsType">metrics type</label>
  <SELEct id="metricsType" class="form-control" required [(ngModel)] ="model.metrics.type">
     <option value="" disabled="true" [SELEcted]="!model.metrics.type">--please SELEct--</option>
     <option *ngFor="let item of metricTypes" [value]="item.value">{{item.label}}</option>
  </SELEct>
 </div>

然后使用css ng-prisTine进行样式设计

SELEct {
 border: 1px solid transparent;
  &.ng-prisTine{
    font-style: italic;
    color: darken($white,50%);
  }
}

大佬总结

以上是大佬教程为你收集整理的添加占位符以在angular2中选择标记全部内容,希望文章能够帮你解决添加占位符以在angular2中选择标记所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。