user input formatting
This commit is contained in:
parent
b66786ed55
commit
345a013156
|
@ -1,7 +1,7 @@
|
||||||
.statement
|
.statement
|
||||||
h4 Live Examples
|
h4 Live Examples
|
||||||
p.
|
p.
|
||||||
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview> ES5 Example</a>.
|
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview'> ES5 Example</a>.
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2#section-responding-to-user-input Responding to user input with event syntax
|
h2#section-responding-to-user-input Responding to user input with event syntax
|
||||||
|
@ -31,7 +31,7 @@
|
||||||
event. And the <code>{{myname.value}}</code> binds the text node of the <code><p></code> element to the
|
event. And the <code>{{myname.value}}</code> binds the text node of the <code><p></code> element to the
|
||||||
input's value property.
|
input's value property.
|
||||||
p Let's do something a little more complex where users enter items and add them to a list like this:
|
p Let's do something a little more complex where users enter items and add them to a list like this:
|
||||||
div(align='center')
|
figure.image-display
|
||||||
img(src='user-input-example1.png')
|
img(src='user-input-example1.png')
|
||||||
|
|
||||||
|
|
||||||
|
@ -42,7 +42,8 @@
|
||||||
list. Inside the controller, add an array with an initial list of items. Then add a method that pushes new items
|
list. Inside the controller, add an array with an initial list of items. Then add a method that pushes new items
|
||||||
on the array when called.
|
on the array when called.
|
||||||
|
|
||||||
pre.prettyprint.linenums.lang-javascript
|
.code-box
|
||||||
|
pre.prettyprint.linenums.lang-javascript(data-name="es5")
|
||||||
code.
|
code.
|
||||||
//ES5
|
//ES5
|
||||||
function TodoList() {
|
function TodoList() {
|
||||||
|
@ -52,7 +53,7 @@
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
pre.prettyprint.linenums.lang-typescript
|
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
|
||||||
code.
|
code.
|
||||||
//TypeScript
|
//TypeScript
|
||||||
class TodoList {
|
class TodoList {
|
||||||
|
@ -116,7 +117,8 @@
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2#section-final-code Final Code
|
h2#section-final-code Final Code
|
||||||
|
|
||||||
pre.prettyprint.lang-javascript
|
.code-box
|
||||||
|
pre.prettyprint.lang-javascript(data-name="es5")
|
||||||
code.
|
code.
|
||||||
//ES5
|
//ES5
|
||||||
function TodoList() {
|
function TodoList() {
|
||||||
|
@ -155,7 +157,7 @@
|
||||||
angular.bootstrap(TodoList);
|
angular.bootstrap(TodoList);
|
||||||
});
|
});
|
||||||
|
|
||||||
pre.prettyprint.lang-typescript
|
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||||
code.
|
code.
|
||||||
//TypeScript
|
//TypeScript
|
||||||
import {Component, View, bootstrap, For, If} from 'angular2/angular2';
|
import {Component, View, bootstrap, For, If} from 'angular2/angular2';
|
||||||
|
|
Loading…
Reference in New Issue