comparison src/app/query-select.component.ts @ 48:f8d6f8479e77 ng2-final

first working version with angular 2.4 (using old table w/o pager).
author casties
date Mon, 20 Mar 2017 18:12:48 +0100
parents b65a031c4967
children b22e52a128a8
comparison
equal deleted inserted replaced
47:b65a031c4967 48:f8d6f8479e77
13 selector: 'query-select', 13 selector: 'query-select',
14 template: ` 14 template: `
15 <p *ngIf="resultInfo">&nbsp;&nbsp;&nbsp;result: {{resultInfo}}</p> 15 <p *ngIf="resultInfo">&nbsp;&nbsp;&nbsp;result: {{resultInfo}}</p>
16 <div> 16 <div>
17 <form (ngSubmit)="onSubmit()"> 17 <form (ngSubmit)="onSubmit()">
18 <select (change)="onSelectMode($event)"> 18 <select name="mode" (change)="onSelectMode($event)">
19 <option></option> 19 <option></option>
20 <option *ngFor="let mode of getQueryModes()" [value]="mode.id"> 20 <option *ngFor="let mode of getQueryModes()" [value]="mode.id">
21 {{mode.label}} 21 {{mode.label}}
22 </option> 22 </option>
23 </select> 23 </select>
24 24
25 <span *ngIf="selectedMode?.id=='type_is'"> 25 <span *ngIf="selectedMode?.id=='type_is'">
26 <select *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)"> 26 <select name="option" *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)">
27 <option></option> 27 <option></option>
28 <option *ngFor="let option of queryOptions" [value]="option"> 28 <option *ngFor="let option of queryOptions" [value]="option">
29 {{option}} 29 {{option}}
30 </option> 30 </option>
31 </select> 31 </select>
32 </span> 32 </span>
33 33
34 <span *ngIf="selectedMode?.id=='relation_is'"> 34 <span *ngIf="selectedMode?.id=='relation_is'">
35 <select *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)"> 35 <select name="option" *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)">
36 <option></option> 36 <option></option>
37 <option *ngFor="let option of queryOptions" [value]="option.getName()"> 37 <option *ngFor="let option of queryOptions" [value]="option.getName()">
38 {{option.getLabel()}} 38 {{option.getLabel()}}
39 </option> 39 </option>
40 </select> 40 </select>
41 </span> 41 </span>
42 42
43 <span *ngIf="selectedMode?.id=='att_contains' || selectedMode?.id=='att_contains_norm'"> 43 <span *ngIf="selectedMode?.id=='att_contains' || selectedMode?.id=='att_contains_norm'">
44 <select [ngModel]="selectedOption" (change)="selectedOption=$event.target.value"> 44 <select name="option" [ngModel]="selectedOption" (change)="selectedOption=$event.target.value">
45 <option></option> 45 <option></option>
46 <option *ngFor="let option of queryOptions" [value]="option"> 46 <option *ngFor="let option of queryOptions" [value]="option">
47 {{option}} 47 {{option}}
48 </option> 48 </option>
49 </select> 49 </select>
50 <span>contains</span> 50 <span>contains</span>
51 <input type="text" [(ngModel)]="queryInput"/> 51 <input type="text" name="value" [(ngModel)]="queryInput"/>
52 </span> 52 </span>
53 53
54 <span *ngIf="selectedMode?.id=='att_num_range'"> 54 <span *ngIf="selectedMode?.id=='att_num_range'">
55 <select [ngModel]="selectedOption" (change)="selectedOption=$event.target.value"> 55 <select name="option" [ngModel]="selectedOption" (change)="selectedOption=$event.target.value">
56 <option></option> 56 <option></option>
57 <option *ngFor="let option of queryOptions" [value]="option"> 57 <option *ngFor="let option of queryOptions" [value]="option">
58 {{option}} 58 {{option}}
59 </option> 59 </option>
60 </select> 60 </select>
61 <span>is between</span> 61 <span>is between</span>
62 <input type="text" [(ngModel)]="queryInput"/> 62 <input type="text" name="value1" [(ngModel)]="queryInput"/>
63 <span>and</span> 63 <span>and</span>
64 <input type="text" [(ngModel)]="queryInput2"/> 64 <input type="text" name="value2" [(ngModel)]="queryInput2"/>
65 </span> 65 </span>
66 66
67 <span *ngIf="selectedMode?.id=='id_is'"> 67 <span *ngIf="selectedMode?.id=='id_is'">
68 <input type="text" [(ngModel)]="queryInput"/> 68 <input type="text" name="value" [(ngModel)]="queryInput"/>
69 </span> 69 </span>
70 70
71 <button type="submit">Submit</button> 71 <button type="submit">Submit</button>
72 </form> 72 </form>
73 </div> 73 </div>