使用ngRepeat循环产生li标签，todo in todos | filter:statusFilter track by $index，循环todos，用statusFilter过滤，用$index追踪。ngClass绑定了两个class，{completed: todo.completed, editing: todo == editedTodo}，如果todo.completed为true，添加completed class，如果todo==editedTodo，则添加editing class。class为toggle的checkbox绑定到todo.completed。todo标题展示的label绑定了双击事件，双击触发editTodo(todo)，editTodo会将todo赋给editedTodo，然后会触发下面form中的todoFocus指令，这时候form中的input可见。按Esc就触发revertEditing(todo)，恢复到编辑前，按Enter或者失去焦点就触发doneEditing(todo) ，保存编辑后的todo。class为destroy的button绑定了click事件，点击触发removeTodo(todo)，删除掉该条todo。
最后看todos的统计信息展示的html
复制代码 代码如下:
<footer ng-show="todos.length" ng-cloak>
<span><strong>{{remainingCount}}</strong>
<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
</span>
<ul>
<li>
<a ng-class="{selected: location.path() == 'https://www.jb51.net/'} " href="#/">All</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/active'}" href="#/active">Active</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
</li>
</ul>
<button ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed ({{completedCount}})</button>
</footer>
ng-pluralize标签实现了当remainingCount个数为1时，显示 item left，否则显示 items left。
id为filters的ul标签中根据location.path()的内容不同，标记不同的a标签被选中。
id为clear-completed的button添加了点击事件，触发clearCompletedTodos()，清除掉所有已完成的todo。
今天的笔记就先到这里吧，都是些个人心得，希望小伙伴们能够喜欢。
您可能感兴趣的文章: