Skip to content

Instantly share code, notes, and snippets.

@LinBoLen LinBoLen/config.js
Last active May 9, 2016

What would you like to do?
Angular2 Select All and Inverse Select
//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>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="//"></script>
<script src="//"></script>
<script src="//"></script>
<script src="config.js"></script>
<script src=""></script>
<script src="//"></script>
<script src="//"></script>
<script src="//"></script>
packages: {
'Components': {
defaultExtension: 'ts',
'src': {
defaultExtension: 'ts',
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
import {Component, forwardRef, Injector, Injectable} from "angular2/core";
import {CORE_DIRECTIVES} from "angular2/common";
class SelectItem{
private checkIndexObj = new Object();
return this.checkIndexObj.index;
setItem(index, isChecked){
this.checkIndexObj[index] = isChecked;
selector : 'app',
template :
`<h3>ngfor input checkbox</h3>
<template ngFor let-item [ngForOf]="items">
<input type="checkbox" [(ngModel)]="item.checked"/>
<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);"/>
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) {
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";
).then((componentRef: ComponentRef) => {
/* Styles go here */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.