Skip to content

Commit

Permalink
fix(select): Fixed select with ngModel (issue #3)
Browse files Browse the repository at this point in the history 
#3
  • Loading branch information
@rubyboy
rubyboy committed Feb 24, 2016
1 parent 218c89b commit 70a1b09
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 48 deletions.
42 changes: 31 additions & 11 deletions app/components/forms.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {Component} from "angular2/core"
<form materialize class="col s12">
<div class="row">
<div class="input-field col s6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<input [(ngModel)]="firstName" placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s6">
Expand Down Expand Up @@ -56,18 +56,27 @@ import {Component} from "angular2/core"
</div>
</div>
<div class="row">
<div class="input-field col s12">
<select materialize="material_select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
<div class="input-field col s6">
<select [(ngModel)]="selectedOption" materialize="material_select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
<div class="input-field col s6">
<select [(ngModel)]="selectedOption" materialize="material_select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
</div>
<div class="row">
<div class="switch">
<div class="col s6 switch">
<label>
Off
<input type="checkbox">
Expand All @@ -77,6 +86,17 @@ import {Component} from "angular2/core"
</div>
</div>
</form>
<br/><hr/><hr/><br/>
<div class="row">
<div class="col s6">First Name: {{firstName}}</div>
</div>
<div class="row">
<div class="col s6">Selected Option: {{selectedOption}}</div>
</div>
`
})
export class Forms {}
export class Forms {
private firstName = "";
private selectedOption = "";

}
33 changes: 32 additions & 1 deletion app/components/tabs.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import {MaterializeDirective} from "../../src/index";
import {Component} from "angular2/core"
//import {Component,OnDestroy} from "angular2/core"
//import {Router,RouteParams} from "angular2/router"
//import {Subscription} from "rxjs/subscription";

@Component({
selector: "tabs",
Expand All @@ -13,6 +16,12 @@ import {Component} from "angular2/core"
<li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
<li class="tab col s3"><a href="#test4">Test 4</a></li>
</ul>
<!--<ul materialize="tabs" [materializeParams]="selectionParams" class="tabs">
<li class="tab col s3"><a (click)="$event.preventDefault();routeTo('test1')" href="#test1">Test 1</a></li>
<li class="tab col s3"><a (click)="$event.preventDefault();routeTo('test2')" href="#test2">Test 2</a></li>
<li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
<li class="tab col s3"><a (click)="$event.preventDefault();routeTo('test4')" href="#test4">Test 4</a></li>
</ul>-->
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
Expand All @@ -21,4 +30,26 @@ import {Component} from "angular2/core"
</div>
`
})
export class Tabs {}
export class Tabs {
//export class Tabs implements OnDestroy {
// private routerSubscription:Subscription;
// private selectionParams = null;
// constructor(private router:Router, private routeParams:RouteParams) {
// this.updateSelectionParams();
// this.routerSubscription = <Subscription>router.subscribe(() => {
// this.updateSelectionParams();
// });
// }
// updateSelectionParams() {
// const tabName = this.routeParams.get("tabName");
// if (tabName && (!this.selectionParams || tabName!=this.selectionParams[1])) {
// this.selectionParams = ['select_tab',tabName];
// }
// }
// routeTo(tabName) {
// this.router.navigate(["Tabs",{tabName}])
// }
// ngOnDestroy() {
// this.routerSubscription.unsubscribe();
// }
}
45 changes: 21 additions & 24 deletions config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,14 @@ System.config({
},

map: {
"angular2": "npm:angular2@2.0.0-beta.3",
"angular2": "npm:angular2@2.0.0-beta.6",
"clean-css": "npm:clean-css@3.4.9",
"jquery": "npm:jquery@2.2.1",
"materialize": "github:Dogfalo/materialize@0.97.5",
"reflect-metadata": "npm:reflect-metadata@0.1.3",
"rxjs": "npm:rxjs@5.0.0-beta.1",
"typescript": "npm:typescript@1.7.5",
"zone.js": "npm:zone.js@0.5.13",
"rxjs": "npm:rxjs@5.0.0-beta.2",
"typescript": "npm:typescript@1.8.0",
"zone.js": "npm:zone.js@0.5.14",
"github:Dogfalo/materialize@0.97.5": {
"css": "github:systemjs/plugin-css@0.1.20",
"jquery": "github:components/jquery@2.2.0"
Expand Down Expand Up @@ -92,18 +93,18 @@ System.config({
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:angular2@2.0.0-beta.3": {
"npm:angular2@2.0.0-beta.6": {
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"es6-promise": "npm:es6-promise@3.0.2",
"es6-promise": "npm:es6-promise@3.1.2",
"es6-shim": "npm:es6-shim@0.33.13",
"process": "github:jspm/nodelibs-process@0.1.2",
"reflect-metadata": "npm:reflect-metadata@0.1.2",
"rxjs": "npm:rxjs@5.0.0-beta.0",
"zone.js": "npm:zone.js@0.5.11"
"zone.js": "npm:zone.js@0.5.14"
},
"npm:asn1.js@4.4.0": {
"assert": "github:jspm/nodelibs-assert@0.1.0",
"bn.js": "npm:bn.js@4.10.1",
"bn.js": "npm:bn.js@4.10.3",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"inherits": "npm:inherits@2.0.1",
"minimalistic-assert": "npm:minimalistic-assert@1.0.0",
Expand All @@ -112,7 +113,7 @@ System.config({
"npm:assert@1.3.0": {
"util": "npm:util@0.10.3"
},
"npm:bn.js@4.10.1": {
"npm:bn.js@4.10.3": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:browserify-aes@1.0.6": {
Expand Down Expand Up @@ -141,14 +142,14 @@ System.config({
"inherits": "npm:inherits@2.0.1"
},
"npm:browserify-rsa@4.0.0": {
"bn.js": "npm:bn.js@4.10.1",
"bn.js": "npm:bn.js@4.10.3",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"constants": "github:jspm/nodelibs-constants@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"randombytes": "npm:randombytes@2.0.2"
},
"npm:browserify-sign@4.0.0": {
"bn.js": "npm:bn.js@4.10.1",
"bn.js": "npm:bn.js@4.10.3",
"browserify-rsa": "npm:browserify-rsa@4.0.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2",
Expand Down Expand Up @@ -205,7 +206,7 @@ System.config({
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:create-ecdh@4.0.0": {
"bn.js": "npm:bn.js@4.10.1",
"bn.js": "npm:bn.js@4.10.3",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"elliptic": "npm:elliptic@6.2.3"
Expand Down Expand Up @@ -244,21 +245,21 @@ System.config({
"minimalistic-assert": "npm:minimalistic-assert@1.0.0"
},
"npm:diffie-hellman@5.0.2": {
"bn.js": "npm:bn.js@4.10.1",
"bn.js": "npm:bn.js@4.10.3",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"miller-rabin": "npm:miller-rabin@4.0.0",
"randombytes": "npm:randombytes@2.0.2",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:elliptic@6.2.3": {
"bn.js": "npm:bn.js@4.10.1",
"bn.js": "npm:bn.js@4.10.3",
"brorand": "npm:brorand@1.0.5",
"hash.js": "npm:hash.js@1.0.3",
"inherits": "npm:inherits@2.0.1",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:es6-promise@3.0.2": {
"npm:es6-promise@3.1.2": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:es6-shim@0.33.13": {
Expand All @@ -282,7 +283,7 @@ System.config({
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:miller-rabin@4.0.0": {
"bn.js": "npm:bn.js@4.10.1",
"bn.js": "npm:bn.js@4.10.3",
"brorand": "npm:brorand@1.0.5"
},
"npm:os-browserify@0.1.2": {
Expand Down Expand Up @@ -313,7 +314,7 @@ System.config({
"assert": "github:jspm/nodelibs-assert@0.1.0"
},
"npm:public-encrypt@4.0.0": {
"bn.js": "npm:bn.js@4.10.1",
"bn.js": "npm:bn.js@4.10.3",
"browserify-rsa": "npm:browserify-rsa@4.0.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2",
Expand Down Expand Up @@ -355,7 +356,7 @@ System.config({
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:rxjs@5.0.0-beta.1": {
"npm:rxjs@5.0.0-beta.2": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
Expand Down Expand Up @@ -390,12 +391,8 @@ System.config({
"npm:vm-browserify@0.0.4": {
"indexof": "npm:indexof@0.0.1"
},
"npm:zone.js@0.5.11": {
"es6-promise": "npm:es6-promise@3.0.2",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:zone.js@0.5.13": {
"es6-promise": "npm:es6-promise@3.0.2",
"npm:zone.js@0.5.14": {
"es6-promise": "npm:es6-promise@3.1.2",
"process": "github:jspm/nodelibs-process@0.1.2"
}
}
Expand Down
21 changes: 11 additions & 10 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
"dist": "gulp",
"semantic-release": "semantic-release pre && npm publish && semantic-release post",
"deploy-app": "npm-run-all deploy-app:*",
"deploy-app:clean": "rm -rf dist/app",
"deploy-app:bundle": "jspm bundle-sfx app dist/app/index.js",
"deploy-app:copy-index": "cat index.html | tr '\n' ' ' | sed 's/<script.*<\\/script>//g' > dist/app/index.html",
"deploy-app:append-script": "echo \"<script src='index.js'><\/script>\" >> dist/app/index.html",
"deploy-app:copy-resources": "rsync -Ravz jspm_packages/github/Dogfalo/materialize@*/font/ dist/app",
"deploy-app:deploy": "surge -p dist/app -d angular2-materialize.surge.sh"
"deploy-app:clean": "rm -rf dist/app",
"deploy-app:bundle": "jspm bundle-sfx app dist/app/index.js",
"deploy-app:copy-index": "cat index.html | tr '\n' ' ' | sed 's/<script.*<\\/script>//g' > dist/app/index.html",
"deploy-app:append-script": "echo \"<script src='index.js'></script>\" >> dist/app/index.html",
"deploy-app:copy-resources": "rsync -Ravz jspm_packages/github/Dogfalo/materialize@*/font/ dist/app",
"deploy-app:deploy": "surge -p dist/app -d angular2-materialize.surge.sh"
},
"repository": {
"type": "git",
Expand All @@ -37,7 +37,7 @@
"homepage": "https://github.com/InfomediaLtd/angular2-materialize#readme",
"dependencies": {},
"devDependencies": {
"angular2": "^2.0.0-beta.3",
"angular2": "^2.0.0-beta.6",
"commitizen": "^2.4.6",
"cz-conventional-changelog": "^1.1.5",
"es6-shim": "^0.33.3",
Expand Down Expand Up @@ -66,11 +66,12 @@
"jspmNodeConversion": false,
"jspm": {
"dependencies": {
"angular2": "npm:angular2@^2.0.0-beta.3",
"angular2": "npm:angular2@^2.0.0-beta.6",
"jquery": "npm:jquery@^2.2.1",
"materialize": "github:Dogfalo/materialize@^0.97.5",
"reflect-metadata": "npm:reflect-metadata@^0.1.3",
"rxjs": "npm:rxjs@^5.0.0-beta.0",
"zone.js": "npm:zone.js@^0.5.11"
"rxjs": "npm:rxjs@^5.0.0-beta.2",
"zone.js": "npm:zone.js@^0.5.14"
},
"devDependencies": {
"clean-css": "npm:clean-css@^3.4.9",
Expand Down
22 changes: 20 additions & 2 deletions src/materialize-directive.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Directive, ElementRef, Input, AfterViewInit} from 'angular2/core';
import {Directive, ElementRef, Input, DoCheck, AfterViewInit} from 'angular2/core';

declare var $:any;
declare var Materialize:any;
Expand All @@ -18,11 +18,13 @@ declare var Materialize:any;
@Directive({
selector: '[materialize]'
})
export class MaterializeDirective implements AfterViewInit {
export class MaterializeDirective implements AfterViewInit,DoCheck {

private _params:[any] = null;
private _functionName:string = null;

private previousValue = null;

constructor(private _el: ElementRef) {
}

Expand All @@ -38,6 +40,16 @@ export class MaterializeDirective implements AfterViewInit {
this.performElementUpdates();
}

ngDoCheck() {
if (this._functionName && this._functionName === "material_select") {
if (this._el.nativeElement.value!=this.previousValue) {
this.previousValue = this._el.nativeElement.value;
this.performElementUpdates();
}
}
return false;
}

performElementUpdates() {
// it should have been created by now, but confirm anyway
if (Materialize && Materialize.updateTextFields) {
Expand All @@ -63,6 +75,12 @@ export class MaterializeDirective implements AfterViewInit {
throw new Error("Couldn't find materialize function ''" + this._functionName + "' on element or the global Materialize object.");
}
}
// handle select
if (this._functionName === "material_select") {
jQueryElement.change((e) => {
this._el.nativeElement.dispatchEvent(new Event("input"));
});
}
}
}

Expand Down

0 comments on commit 70a1b09

Please sign in to comment.