角2フラグと国コード付きのドロップダウン

Question

私のアプリはng2で国際化されています。ログインページには、すべてのオプションに国旗と国名があるドロップダウンメニューがあります。 自分でやるのに役立つ例があります

Answer 1

CountrySelectは、フラグ、country-isoCode、phoneCodeの値を持つ国のドロップダウンに使用できます。あなたは、このリンクを介して行くことができる

：これを使用するにはhttps://github.com/mrmarkfrench/country-select-js

、あなたはあなたの角度のアプリケーションでこれを使用してjQuery("#nationality").countrySelect();

を使用して、入力制御に適用する countrySelect.jsと countrySelect.cssを追加する必要があります

以下は私のアプリケーションで使用したコードです。

journey-details.html

<form class="form-horizontal" (submit)="saveApplication(applicationform.value)" #applicationform="ngForm" *ngIf="application" novalidate> 
      <div class="form-group"> 
       <div class="col-sm-3 col-md-3 hidden-xs"> 
        <i class="fa fa-globe" aria-hidden="true"></i> 
        <label class="frmlable required-field bgorange">Nationality (As in passport)</label> 
       </div> 
       <div class="col-sm-9 col-md-4"> 
        <input class="form-control nationality-country enjoy-css" type="text" id="nationality"> 
       </div> 
      </div> 
</form> 

journey-details.ts

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { AjaxLoader } from '../shared/services/ajax-loader'; 
import { Country } from '../shared/models/country'; 
declare var jQuery: any; 

@Component({ 
    moduleId: module.id, 
    selector: 'visa-journey-details', 
    templateUrl: 'journey-details.html', 
    providers: [CommonService, AjaxLoader, AuthCookie] 
}) 

export class JourneyDetailsComponent { 
    public nationalities: Country; 
    public countryIsoCode: string = ''; 

    constructor(
     private router: Router, 
     private ajaxLoader: AjaxLoader) { 
     this.ajaxLoader.startLoading(); 
     this.getDropDownList(); 
    } 

    ngAfterViewInit() { 
     jQuery("#nationality").countrySelect(); 

     jQuery("#nationality").on('change',() => { 
      this.onChange(); 
     }); 
    } 

    onChange(): void { 
     if (jQuery("#nationality").countrySelect("getSelectedCountryData")) { 
      this.countryIsoCode = jQuery("#nationality").countrySelect("getSelectedCountryData").iso2; 
     } else { 
      this.countryIsoCode = ''; 
     } 
    } 
} 

project.config.ts

import { join } from 'path'; 

import { SeedConfig } from './seed.config'; 

/** 
* This class extends the basic seed configuration, allowing for project specific overrides. A few examples can be found 
* below. 
*/ 
export class ProjectConfig extends SeedConfig { 

    PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project'); 

    constructor() { 
     super(); 
     // this.APP_TITLE = 'Put name of your app here'; 

     /* Enable typeless compiler runs (faster) between typed compiler runs. */ 
     // this.TYPED_COMPILE_INTERVAL = 5; 

     // Add `NPM` third-party libraries to be injected/bundled. 
     this.NPM_DEPENDENCIES = [ 
      ...this.NPM_DEPENDENCIES, 
      // {src: 'jquery/dist/jquery.min.js', inject: 'libs'}, 
      // {src: 'lodash/lodash.min.js', inject: 'libs'}, 
      { src: '../../src/client/js/index.js', inject: 'libs' }, 
      { src: '../../src/client/js/Intl.min.js', inject: 'libs' }, 
      { src: '../../node_modules/intl/locale-data/jsonp/en.js', inject: 'libs' }, 
      { src: '../../src/client/js/es6-shim.min.js', inject: 'libs' }, 
      { src: '../../src/client/js/jquery-1.11.1.min.js', inject: 'libs'}, 
      { src: '../../src/client/js/moment.min.js', inject: 'libs'}, 
      { src: '../../src/client/js/plugins.js', inject: 'libs'}, 
      { src: '../../src/client/js/daterangepicker.js', inject: 'libs' }, 
      { src: '../../src/client/js/custom.min.js', inject: 'libs'}, 
      { src: '../../src/client/js/common-script.js', inject: 'libs' }, 
      { src: '../../src/client/js/QuickAccord.js', inject: 'libs' }, 
      { src: '../../src/client/js/paperfold.js', inject: 'libs' }, 
      { src: '../../src/client/css/daterangepicker.css', inject: true }, 
      { src: '../../src/client/css/style.min.css', inject: true }, 
     ]; 

     // Add `local` third-party libraries to be injected/bundled. 
     this.APP_ASSETS = [ 
      ...this.APP_ASSETS, 
     ]; 

     /* Add to or override NPM module configurations: */ 
     // this.mergeObject(this.PLUGIN_CONFIGS['browser-sync'], { ghostMode: false }); 
    } 

} 

これはあなたを助けることを願っています。

同じのための別の参照： http://www.jqueryscript.net/form/jQuery-Plugin-For-Country-Selecter-with-Flags-flagstrap.html