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

以我之前写的一个清单列表页面作为例子（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）——与用户交互的动态清单列表的更多相关文章

  1. AngularJS学习笔记（3）——通过Ajax获取JSON数据

    通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...

  2. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

  3. AngularJs学习笔记--Injecting Services Into Controllers

    原版地址:http://docs.angularjs.org/guide/dev_guide.services.injecting_controllers 把service当作被依赖的资源加载到con ...

  4. AngularJs学习笔记--E2E Testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.e2e-testing 当一个应用的复杂度.大小在增加时,使得依靠人工去测试新特性的可靠性.抓Bug和回归 ...

  5. AngularJs学习笔记--Understanding Angular Templates

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...

  6. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  7. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  8. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  9. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

随机推荐

  1. 1003: [ZJOI2006]物流运输 最短路+dp

    https://www.lydsy.com/JudgeOnline/problem.php?id=1003 数据范围很小,怎么瞎搞都行,n方dp,然后跑出最短路暴力转移,需要注意的是不能使用的可能有多 ...

  2. div固定顶部和底部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. sgu 146. The Runner 取模技巧 难度:1

    146. The Runner time limit per test: 0.25 sec.memory limit per test: 4096 KB input: standard inputou ...

  4. （UDP）socket编程

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  5. openfalcon源码分析之graph

    openfalcon源码分析之graph 本节内容 graph功能 graph源码分析 2.1 graph中重要的数据结构 2.2 graph的简要流程图 2.3 graph处理数据过程 2.4 gr ...

  6. FireFox和IE下使用Date来构造新Date对象的BUG

    正常方式 我们都知道可以使用new Date()来创建一个Date对象. new Date();//Date {Mon Jun 15 2015 15:53:16 GMT+0800} 也可以用new D ...

  7. U盘安装linix

    首先制作u盘启动器. 然后在电脑上使用UltraISO将你的安装的linix系统刻录到u盘上 在放入一份linix系统在u盘更目录 boot页面u盘启动.选择 第二次没有放入系统在u盘根目录出现这个: ...

  8. Java中，什么时候用logger.debuge，info,error

    简单的说,就是配合log的等级过滤输出比如,你在开发的时候,要验证一个方法有没有被调用到,为了方便调试,通常会在这个方法开始的时候加一些system.out.但是项目真正发布的时候这些代码通常是要移除 ...

  9. Python windows serial

    Python windows serial 一.参考文章: Serial port programming http://www.cnblogs.com/2zhyi/p/3405339.html py ...

  10. java spring boot 出现 java.lang.UnsatisfiedLinkError

    java.lang.UnsatisfiedLinkError: E:\ruanjian\jdk\bin\tcnative-1.dll: Can't load IA 32-bit .dll on a A ...