AngularJS学习笔记之TodoMVC的分析(5)

来看添加todo的html,绑定的model为newTodo,submit的方法是todoCtrl.js中的addTodo(),会添加一条todo,点击Enter,默认触发提交事件,就触发了addTodo()方法,添加了一条todo到todos中。

复制代码 代码如下:


<form ng-submit="addTodo()">
    <input placeholder="What needs to be done?" ng-model="newTodo" autofocus>
</form>

再看展示todos的html

复制代码 代码如下:


<section ng-show="todos.length" ng-cloak>
    <input type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
    <label for="toggle-all">Mark all as complete</label>
    <ul>
        <li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
            <div>
                <input type="checkbox" ng-model="todo.completed">
                <label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
                <button ng-click="removeTodo(todo)"></button>
            </div>
            <form ng-submit="doneEditing(todo)">
                <input ng-trim="false" ng-model="todo.title" todo-escape="revertEditing(todo)" ng-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
            </form>
        </li>
    </ul>
</section>

section使用ngShow方法根据todos的长度判断是否显示,加上ng-cloak属性是为了在刚开始时不要显示出AngularJS未处理的页面。可以去掉刷新试一试。

其中id为toggle-all的checkbox绑定到allChecked model上,点击触发markAll(allChecked),将allChecked的值传入,标记所有的todos。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgfjsd.html