<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.3/Reflect.js"></script>
<script src="https://cdn.rawgit.com/angular/zone.js/master/dist/zone.min.js"></script>
<script src="config.js"></script>
<script src="https://npmcdn.com/ionic-angular@2.0.0-beta.10/bundles/ionic.system.js"></script>
<link href="https://npmcdn.com/ionic-angular@2.0.0-beta.10/bundles/ionic.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- this Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script>
System.import('app.ts')
</script>
</body>
</html>
import { NavController } from 'ionic-angular/index';
import { Page1 } from 'page1.ts'
import { Component } from "@angular/core";
@Component({
templateUrl:"home.html"
})
export class HomePage {
inputBar:any;
subInputBar:any;
selectIndex:any;
selectOption:any;
greeting: string;
arrayData = [
{
"groupId": 1,
"name": "Incorporation of A Company & Matters Incidental Thereto",
"inspectionCheckList": [
{
"id": 1,
"name": "Alteration of Articles",
"displayOrder": 1
},
{
"id": 2,
"name": "Change of Name",
"displayOrder": 2
},
{
"id": 3,
"name": "Increase or Consolidation of share capital",
"displayOrder": 3
},
{
"id": 4,
"name": " Reduction of share capital",
"displayOrder": 4
}
]
},{
"groupId": 3,
"name": "STATUTORY RECORD AND INSPECTION",
"inspectionCheckList": [
{
"id": 41,
"name": "Statutory record and inspection",
"displayOrder": 37
},
{
"id": 42,
"name": "a. Register of buy-back of shares",
"displayOrder": 38
},
{
"id": 43,
"name": "b. Register of transfers",
"displayOrder": 39
},
{
"id": 44,
"name": "c. Register of Charges",
"displayOrder": 40
},
{
"id": 45,
"name": "d. Register of inter-corporate loans",
"displayOrder": 41
},
{
"id": 46,
"name": "e. Register of inter-corporate investments",
"displayOrder": 42
},
{
"id": 47,
"name": "f. Register of contracts in which directors are interested",
"displayOrder": 43
},
{
"id": 48,
"name": "g. Register of directors",
"displayOrder": 44
},
{
"id": 49,
"name": "h. Register of directors shareholding",
"displayOrder": 45
}
]
},
{
"groupId": 4,
"name": "OTHERS",
"inspectionCheckList": [
{
"id": 50,
"name": "\tOTHERS",
"displayOrder": 46
}
]
}];
constructor(private nav: NavController) {
}
goToPage1() {
this.nav.push(Page1);
}
datachanged(indexQ,indexI,option){
console.log('indexQ',indexQ);
console.log('indexI',indexI);
console.log('option',option);
if(option == 0){
this.inputBar = indexQ;
this.subInputBar = indexI;
this.selectOption = option;
}else{
this.inputBar=-1;
this.subInputBar =-1;
this.selectOption = -1;
}
}
}
SCROLL-CONTENT {
overflow-y: auto !important;
}
CODE {
background: #EFEFEF;
}
/**
* PLUNKER VERSION (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
* Override at the last minute with global.filterSystemConfig (as plunkers do)
*/
(function(global) {
var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!
//map tells the System loader where to look for things
var map = {
'app': 'src', // 'dist',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'app.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
packageNames.forEach(function(pkgName) {
map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
});
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import { Component } from "@angular/core";
import { ionicBootstrap, Platform } from 'ionic-angular/index';
import { HomePage } from './home.ts';
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {
constructor(private platform: Platform) {
this.rootPage = HomePage;
}
}
ionicBootstrap(MyApp);
<ion-header>
<ion-navbar primary>
<ion-title>
Ionic 2
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="has-header">
<div padding style="text-align: center;">
<h1>Ionic 2 Test</h1>
</div>
<ion-list >
<ion-item-group *ngFor="let group of arrayData;let i=index;">
<ion-item-divider sticky style="background: #7ec9a2">
<ion-label style="color:#fff;font-size: 13px !important;">
{{group.name}}
</ion-label>
</ion-item-divider>
<div class="padding-question" *ngFor="let quetion of group.inspectionCheckList;let j=index;" >
<p>{{quetion.name}}</p>
<ion-row radio-group formControlName="quetionsRadio" >
<ion-col col-4 no-padding no-margin>
<ion-item >
<ion-label text-right>Yes</ion-label>
<ion-radio (click)="datachanged(i,j,1)" value="1" ></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4 no-padding no-margin>
<ion-item>
<ion-label text-right>No</ion-label>
<ion-radio (click)="datachanged(i,j,0)" value="0"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4 no-padding no-margin>
<ion-item>
<ion-label text-right>N/A</ion-label>
<ion-radio (click)="datachanged(i,j,2)" value="2"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
<ion-item [hidden]="!(inputBar ==i && subInputBar == j && selectOption ==0)">
<ion-label floating>Remarks</ion-label>
<ion-input type="text" ></ion-input>
</ion-item>
</div>
</ion-item-group>
</ion-list>
<ion-row style="padding: 0px;" class="buton-padding">
<ion-col class="submit-col">
<button ion-button class="submit-btn" full type="submit" >Submit</button>
</ion-col>
</ion-row>
</ion-content>
You can use this template to show examples of your Ionic 2 issue.
import { Component } from '@angular/core';
@Component({
templateUrl:"page1.html"
})
export class Page1 {
public array: any = [];
public bills: any = [];
constructor() {
this.bills.push({ id: 0, value: 'bill1'});
this.bills.push({ id: 1, value: 'bill2'});
this.bills.push({ id: 2, value: 'bill3'});
}
}
<ion-header>
<ion-navbar primary>
<ion-title>
Ionic 2
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="has-header">
<div padding style="text-align: center;">
<h1>Ionic 2 Test</h1>
</div>
<ion-list>
<ion-item *ngFor="let bill of bills">
<ion-label floating>{{bill.value}}</ion-label>
<ion-input [(ngModel)]="array[bill.id]" type="text" maxlength="5"></ion-input>
</ion-item>
</ion-list>
{{array | json }}
</ion-content>
import { Component } from "@angular/core";
import {HomePage} from './home.ts';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
}
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
</ion-tabs>