与用户交互的动态清单列表

以我之前写的一个清单列表页面作为例子（MVC模式的清单列表效果），优化前代码如下：

<!DOCTYPE html>

<html ng-app="todoApp">

<head>

    <meta charset="UTF-8">

    <title>TO DO List</title>

    <link href="./bootstrap/css/bootstrap.css" rel="stylesheet"/>

    <link href="./bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>

    <script src="./angularJs/angular.js"></script>

    <script>

        var model = {

            user:"Yimi",

            items:[{action:"练车",done:true},

                {action:"看课外书",done:false}]

        };

        var todoApp = angular.module("todoApp",[]);

        todoApp.controller("ToDoCtrl",function($scope){ //以$开头的变量名表示AngularJS的内置特性

            $scope.todo = model;

        });

    </script>

</head>

<body ng-controller="ToDoCtrl">

    <div class="page-header">

        <h1>{{todo.user}}'s TO DO List</h1>

        <span class="label label-default">{{todo.items.length}}</span>

    </div>

    <div class="panel">

        <div class="input-group">

            <input class="form-control"/>

            <span class="input-group-btn">

                <button class="btn btn-default">Add</button>

            </span>

        </div>

        <table class="table table-striped">

            <thead>

                <tr>

                    <th>Description</th>

                    <th>Done</th>

                </tr>

            </thead>

            <tbody>

                <tr ng-repeat="item in todo.items">

                    <td>{{item.action}}</td>

                    <td>{{item.done}}</td>

                </tr>

            </tbody>

    </table>

    </div>

</body>

</html>

效果如下：

优化过程

1.使复选框状态与布尔值同步（双向模型绑定）

想要为Done属性添加复选框，并与true/false的值同步，即达到以下效果：

点击复现框会使右侧true/false的值同步变化。
只需要为复选框checkbox指定为与true/false同样的ng-model模型属性:

......

<tbody>

        <tr ng-repeat="item in todo.items">

            <td>{{item.action}}</td>

            <td><input type="checkbox" ng-model="item.done"/></td>

            <td>{{item.done}}</td>

        </tr>

</tbody>

......

即checkbox和true/false的模型均为”item.done”，只在原基础上加了一句<td><input type="checkbox" ng-model="item.done"/></td>从而达到双向绑定，同步变化的效果。

2.动态显示待办的事项个数

显示值为false的事项个数，需在控制器todoApp.controller内添加一个计数变量incompleteCount，称为”行为名“。

......

        todoApp.controller("ToDoCtrl",function($scope){ //以$开头的变量名表示AngularJS的内置特性

            $scope.todo = model;

            $scope.incompleteCount = function(){

                var count = 0;

                angular.forEach($scope.todo.items,function(item){

                    if(!item.done){count++;}

                });

                return count;

            }

        });

......

在使用显示待办事项数的标签中调用incompleteCount行为名：

......

<h1>{{todo.user}}'s TO DO List</h1>

    <!--添加ng-hide="incompleteCount() == 0"使未办事项数为0时不显示此标签-->

    <span class="label label-default" ng-hide="incompleteCount() == 0">{{incompleteCount()}}</span>

......

效果如下：

因为使用了ng-hide=”incompleteCount() == 0”，所以当无待办事项时隐藏数量标签：

3.根据待办事项数显示不同颜色标签效果

在控制器todoApp.controller中添加逻辑，设置一个根据待办事项数判定标签class属性的$scope.warningLevel行为:

......

todoApp.controller("ToDoCtrl",function($scope){ //以$开头的变量名表示AngularJS的内置特性

            ......

            cope.warningLevel = function(){

                return $scope.incompleteCount() < 2 ? "label-success" : "label-warning";

            }

        });

......

然后为事项数标签添加ng-class=”warningLevel()”属性：

<span class="label label-default" ng-hide="incompleteCount() == 0" ng-class="warningLevel()">{{incompleteCount()}}</span>

效果如下：
待办事项数 < 2时

待办事项数 >= 2时

4.响应用户输入

在控制器todoApp.controller中添加逻辑，定义$scope.addNewItem使清单列表具有添加新项的功能：

todoApp.controller("ToDoCtrl",function($scope){ //以$开头的变量名表示AngularJS的内置特性

            ......

            $scope.addNewItem = function(actionText){

                $scope.todo.items.push({action:actionText, done:false});

            }

        });

为输入框与Add按钮双向绑定用户所输入的数据actionText:

<div class="input-group">

        <input class="form-control" ng-model="actionText"/>

        <span class="input-group-btn">

                <button class="btn btn-default" ng-click="addNewItem(actionText)">Add</button>

        </span>

</div>

效果如下（为了更美观，顺便把事项数标签向上移了点儿）：

完整源码（所调用的css/js文件需自己再添加）

<!DOCTYPE html>

<html ng-app="todoApp">

<head>

    <meta charset="UTF-8">

    <title>TO DO List</title>

    <link href="./bootstrap/css/bootstrap.css" rel="stylesheet"/>

    <link href="./bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>

    <script src="./angularJs/angular.js"></script>

    <script>

        var model = {

            user:"Yimi",

            items:[{action:"练车",done:true},

                {action:"看课外书",done:false}]

        };

        var todoApp = angular.module("todoApp",[]);

        todoApp.controller("ToDoCtrl",function($scope){ //以$开头的变量名表示AngularJS的内置特性

            $scope.todo = model;

            $scope.incompleteCount = function(){

                var count = 0;

                angular.forEach($scope.todo.items,function(item){

                    if(!item.done){count++;}

                });

                return count;

            }

            $scope.warningLevel = function(){

                return $scope.incompleteCount() < 2 ? "label-success" : "label-warning";

            }

            $scope.addNewItem = function(actionText){

                $scope.todo.items.push({action:actionText, done:false});

            }

        });

    </script>

</head>

<body ng-controller="ToDoCtrl">

<div class="page-header">

    <h1>{{todo.user}}'s TO DO List

    <!--添加ng-hide="incompleteCount() == 0"使未办事项数为0时不显示此标签-->

    <span class="label label-default" ng-hide="incompleteCount() == 0" ng-class="warningLevel()">{{incompleteCount()}}</span></h1>

</div>

<div class="panel">

    <div class="input-group">

        <input class="form-control" ng-model="actionText"/>

        <span class="input-group-btn">

                <button class="btn btn-default" ng-click="addNewItem(actionText)">Add</button>

        </span>

    </div>

    <table class="table table-striped">

        <thead>

        <tr>

            <th>Description</th>

            <th>Done</th>

        </tr>

        </thead>

        <tbody>

        <tr ng-repeat="item in todo.items">

            <td>{{item.action}}</td>

            <td><input type="checkbox" ng-model="item.done"/></td>

            <td>{{item.done}}</td>

        </tr>

        </tbody>

    </table>

</div>

</body>

</html>

AngularJS学习笔记（2）——与用户交互的动态清单列表的更多相关文章

AngularJS学习笔记（3）——通过Ajax获取JSON数据
通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
AngularJs学习笔记--Injecting Services Into Controllers
原版地址:http://docs.angularjs.org/guide/dev_guide.services.injecting_controllers 把service当作被依赖的资源加载到con ...
AngularJs学习笔记--E2E Testing
原版地址:http://docs.angularjs.org/guide/dev_guide.e2e-testing 当一个应用的复杂度.大小在增加时,使得依靠人工去测试新特性的可靠性.抓Bug和回归 ...
AngularJs学习笔记--Understanding Angular Templates
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...
AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

随机推荐

PowerDesigner16工具学习笔记-建立BPM
根据不同用途,BPM分为分析性(Analysis).执行型(Executable)和协作型(Collaborative) BPM的类型业务流程语言描述分析型 Analysis 提供流程层次 ...
fib博弈
链接:https://www.nowcoder.com/acm/contest/77/G来源:牛客网幼儿园开学了,为了让小盆友们能尽可能的多的享受假期.校长大人决定让小盆友分批到校,至于每批学生来 ...
CF 160D Edges in MST 最小生成树的性质,寻桥,缩点,批量处理难度:3
http://codeforces.com/problemset/problem/160/D 这道题要求哪条边存在于某个最小生成树中,哪条边不存在于最小生成树中,哪条边绝对存在于最小生成树中明显桥边 ...
delphi7完全关闭一个窗体
如果一个工程中有若干个form,在程序运行中若要彻底关闭其中的一个窗体除了点击右上角的小叉叉外,也可以在form的close事件中添加一句话 procedure TLockScreen.FormCl ...
html5 实现简单的上传
简单记录下今早做H5上传中一些代码还有坑一.展示因为前端上传文件是必须通过form表单的,不能使用ajax,这样的话一个移动页面放入一个type为file的input真心不怎么好看,如下图,很挫有 ...
PHPExcel解决内存占用过大问题-设置单元格对象缓存
PHPExcel解决内存占用过大问题-设置单元格对象缓存 PHPExcel是一个很强大的处理Excel的PHP开源类,但是很大的一个问题就是它占用内存太大,从1.7.3开始,它支持设置cell的缓存方 ...
Django 之分页
1. urs.py # coding:utf-8 from django.conf.urls import url import views urlpatterns = [ # 分页练习 url(r' ...
APP界面框架初窥---标签导航
标签导航是十大界面框架设计里最常用的界面框架设计,也是被业界之内公认的一种普遍使用的页面框架设计.那么这种页面框架设计在作业方面对一个用户来说也是最常见的一种页面框架设计,比如说微博.微信.手机百度. ...
宏使用 Tricks
人为地定义一些"无意义"的宏(宏名本身有意义),以起到提升代码程序的可读性. 1. IN/OUT 指定参数用于输入还是输出: #define IN #define OUT void ...
MongoDB数据库的特点以及结构
mongodb标签:非关系型数据库文档型数据库最像关系型的非关系型数据库特点: 1. 由c++编写的数据库管理系统 2. 支持丰富的增删改查功能 3. 支持丰富的 ...

AngularJS学习笔记（2）——与用户交互的动态清单列表