da9b46a071
BREAKING CHANGE:
Angular is now fully camel case.
Before:
<p *ng-if="cond">
<my-cmp [my-prop]="exp">
<my-cmp (my-event)="action()">
<my-cmp [(my-prop)]="prop">
<input #my-input>
<template ng-for #my-item [ng-for-of]=items #my-index="index">
After
<p *ngIf="cond">
<my-cmp [myProp]="exp">
<my-cmp (myEvent)="action()">
<my-cmp [(myProp)]="prop">
<input #myInput>`,
<template ngFor="#my-item" [ngForOf]=items #myIndex="index">
The full details are found in [angular2/docs/migration/kebab-case.md](https://github.com/angular/angular/blob/master/modules/angular2/docs/migration/kebab-case.md)
72 lines
1.6 KiB
HTML
72 lines
1.6 KiB
HTML
<style>@import "css/base.css";</style>
|
|
|
|
<section id="todoapp">
|
|
|
|
<header id="header">
|
|
<h1>todos</h1>
|
|
<input
|
|
id="new-todo"
|
|
placeholder="What needs to be done?"
|
|
autofocus
|
|
#newtodo
|
|
(keyup.enter)="enterTodo(newtodo)">
|
|
</header>
|
|
|
|
<section id="main">
|
|
<input id="toggle-all" type="checkbox" (click)="toggleAll($event)">
|
|
<label for="toggle-all">Mark all as complete</label>
|
|
|
|
<ul id="todo-list">
|
|
|
|
<li *ngFor="#todo of todoStore.list">
|
|
|
|
<div class="view"
|
|
[class.hidden]="todoEdit == todo">
|
|
|
|
<input class="toggle" type="checkbox"
|
|
(click)="completeMe(todo)"
|
|
[checked]="todo.completed">
|
|
|
|
<label (dblclick)="editTodo(todo)">{{todo.title}}</label>
|
|
<button class="destroy" (click)="deleteMe(todo)"></button>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input class="edit"
|
|
[class.visible]="todoEdit == todo"
|
|
[value]="todo.title"
|
|
(keyup)="doneEditing($event, todo)">
|
|
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
<footer id="footer">
|
|
<span id="todo-count"></span>
|
|
<div [class.hidden]="true"></div>
|
|
<ul id="filters">
|
|
<li>
|
|
<a href="#/" class="selected">All</a>
|
|
</li>
|
|
<li>
|
|
<a href="#/active">Active</a>
|
|
</li>
|
|
<li>
|
|
<a href="#/completed">Completed</a>
|
|
</li>
|
|
</ul>
|
|
<button id="clear-completed" (click)="clearCompleted()">Clear completed</button>
|
|
</footer>
|
|
|
|
</section>
|
|
|
|
<footer id="info">
|
|
<p>Double-click to edit a todo</p>
|
|
<p>Created by <a href="http://twitter.com/angularjs">The Angular Team</a></p>
|
|
</footer>
|