Skip to content

Instantly share code, notes, and snippets.

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

Embed
What would you like to do?
Angular2 Select All and Inverse Select
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) => {
});
/* 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.