LinboLen/config.js

## config.js
System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

## index.html
<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="//cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2-polyfills.js"></script>
    <script src="//cdn.bootcss.com/systemjs/0.19.27/system.src.js"></script>
    <script src="//cdn.bootcss.com/typescript/1.9.0/typescript.js"></script>
    <script src="config.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/2.0.0-beta.17/Rx.js"></script>
    <script src="//cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2.dev.js"></script>
    <script src="//cdn.bootcss.com/angular.js/2.0.0-beta.17/router.dev.js"></script>
    <script src="//cdn.bootcss.com/angular.js/2.0.0-beta.17/http.min.js"></script>
    <script>
    System.config({
            packages: {
                'Components': {
                    defaultExtension: 'ts',
                },
                'src': {
                    defaultExtension: 'ts',
                },
            },
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true },
        });
    System.import('src/run')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <app>
    loading...
  </app>
  </body>

</html>

## src\AppComponent.ts
import {Component, forwardRef, Injector, Injectable} from "angular2/core";
import {CORE_DIRECTIVES} from "angular2/common";

@Injectable()
class SelectItem{
  private checkIndexObj = new Object();

  getItem(index){
    return this.checkIndexObj.index;

  }

  setItem(index, isChecked){
    this.checkIndexObj[index] = isChecked;
    console.log(this.checkIndexObj);
  }
}

@Component(
  {
    selector  : 'app',
    template  :
`<h3>ngfor input checkbox</h3>
<template ngFor let-item [ngForOf]="items">
    <input type="checkbox" [(ngModel)]="item.checked"/>
</template>

<h3>input checkbox control select all</h3>
<input type="checkbox" [(ngModel)]="selectAll"/>
<h3>input checkbox control inverse select</h3>
<input type="button" (click)="inverseSelect()" value="inverse"/>

<h3>ngfor input checkbox store checked item</h3>
<p>split [(ngModel)] into [ngModel] (ngModelChange)</p>
<template ngFor let-item let-i="index" [ngForOf]="items">
    <input type="checkbox" [ngModel]="selectItem.getItem(i)" (ngModelChange)="selectItem.setItem(i, $event);"/>
</template>
`,
    directives: [CORE_DIRECTIVES],
    providers: [forwardRef(()=>SelectItem)]
  }
)
export class AppComponent {
  private _selectAll;

  public items = [
    {goods: "商品1", categoryName:"分类", checked: false},
    {goods: "商品2", categoryName:"分类", checked: true},
    {goods: "商品3", categoryName:"分类", checked: true},
    {goods: "商品4", categoryName:"分类", checked: false},
    {goods: "商品5", categoryName:"分类", checked: true}
  ]
  public get selectAll(){
    return this._selectAll;
  }

  public set selectAll(value){
    this.items.forEach((item, index) => {
      item.checked = value;
    });
    this._selectAll = value;
  }

  public inverseSelect(){

    this.items.forEach((item, index) => {
      item.checked = !item.checked;
    });

  }

  constructor(private selectItem: SelectItem) {
    console.log(selectItem);
  }

}


## src\run.ts
import {bootstrap} from "angular2/platform/browser";
import {Injectable, ComponentRef} from "angular2/core";
import {provide} from "angular2/core";
import {Component} from "angular2/core";
import {AppComponent} from "./AppComponent";

bootstrap(
    AppComponent
).then((componentRef: ComponentRef) => {
});


## style.css
/* Styles go here */
	System.config({
	//use typescript for compilation
	transpiler: 'typescript',
	//typescript compiler options
	typescriptOptions: {
	emitDecoratorMetadata: true
	},
	//map tells the System loader where to look for things
	map: {
	app: "./src"
	},
	//packages defines our app package
	packages: {
	app: {
	main: './main.ts',
	defaultExtension: 'ts'
	}
	}
	});
	<!DOCTYPE html>
	<html>

	<head>
	<title>angular2 playground</title>
	<link rel="stylesheet" href="style.css" />
	<script src="//cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2-polyfills.js"></script>
	<script src="//cdn.bootcss.com/systemjs/0.19.27/system.src.js"></script>
	<script src="//cdn.bootcss.com/typescript/1.9.0/typescript.js"></script>
	<script src="config.js"></script>
	<script src="https://cdn.bootcss.com/angular.js/2.0.0-beta.17/Rx.js"></script>
	<script src="//cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2.dev.js"></script>
	<script src="//cdn.bootcss.com/angular.js/2.0.0-beta.17/router.dev.js"></script>
	<script src="//cdn.bootcss.com/angular.js/2.0.0-beta.17/http.min.js"></script>
	<script>
	System.config({
	packages: {
	'Components': {
	defaultExtension: 'ts',
	},
	'src': {
	defaultExtension: 'ts',
	},
	},
	transpiler: 'typescript',
	typescriptOptions: { emitDecoratorMetadata: true },
	});
	System.import('src/run')
	.catch(console.error.bind(console));
	</script>
	</head>

	<body>
	<app>
	loading...
	</app>
	</body>

	</html>
	import {Component, forwardRef, Injector, Injectable} from "angular2/core";
	import {CORE_DIRECTIVES} from "angular2/common";

	@Injectable()
	class SelectItem{
	private checkIndexObj = new Object();

	getItem(index){
	return this.checkIndexObj.index;

	}

	setItem(index, isChecked){
	this.checkIndexObj[index] = isChecked;
	console.log(this.checkIndexObj);
	}
	}

	@Component(
	{
	selector : 'app',
	template :
	`<h3>ngfor input checkbox</h3>
	<template ngFor let-item [ngForOf]="items">
	<input type="checkbox" [(ngModel)]="item.checked"/>
	</template>

	<h3>input checkbox control select all</h3>
	<input type="checkbox" [(ngModel)]="selectAll"/>
	<h3>input checkbox control inverse select</h3>
	<input type="button" (click)="inverseSelect()" value="inverse"/>

	<h3>ngfor input checkbox store checked item</h3>
	<p>split [(ngModel)] into [ngModel] (ngModelChange)</p>
	<template ngFor let-item let-i="index" [ngForOf]="items">
	<input type="checkbox" [ngModel]="selectItem.getItem(i)" (ngModelChange)="selectItem.setItem(i, $event);"/>
	</template>
	`,
	directives: [CORE_DIRECTIVES],
	providers: [forwardRef(()=>SelectItem)]
	}
	)
	export class AppComponent {
	private _selectAll;

	public items = [
	{goods: "商品1", categoryName:"分类", checked: false},
	{goods: "商品2", categoryName:"分类", checked: true},
	{goods: "商品3", categoryName:"分类", checked: true},
	{goods: "商品4", categoryName:"分类", checked: false},
	{goods: "商品5", categoryName:"分类", checked: true}
	]
	public get selectAll(){
	return this._selectAll;
	}

	public set selectAll(value){
	this.items.forEach((item, index) => {
	item.checked = value;
	});
	this._selectAll = value;
	}

	public inverseSelect(){

	this.items.forEach((item, index) => {
	item.checked = !item.checked;
	});

	}

	constructor(private selectItem: SelectItem) {
	console.log(selectItem);
	}

	}
	import {bootstrap} from "angular2/platform/browser";
	import {Injectable, ComponentRef} from "angular2/core";
	import {provide} from "angular2/core";
	import {Component} from "angular2/core";
	import {AppComponent} from "./AppComponent";

	bootstrap(
	AppComponent
	).then((componentRef: ComponentRef) => {
	});