AngularJS 的常用特性(二)
3、列表、表格以及其他迭代型元素
ng-repeat可能是最有用的 Angular 指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝。
比如一个学生名册系统需要从服务器上获取学生信息,目前先把模型之间定义在 JavaScript 代码里面:
var students = [{name: 'Mary', id: '1'}, {name: 'Jack', id: '2'}, {name: 'Jill', id: '3'}]; function StudentListController($scope) { $scope.students = students; }
为了显示这个学生列表,可以编写如下代码:
<ul ng-controller="StudentListController"> <li ng-repeat="student in students"> <a href="/student/view/{{student.id}}">{{student.name}}</a> </li> </ul>
ng-repeat 将会生成标签内部所有 HTML 元素的一份拷贝,包括放指令的标签,显示结果如下:
根据具体情况分别链接到 /student/view/1、/student/view/2 以及 /student/view/3。
ng-repeat 指令可以通过 $index 返回当前引用的元素序号(类似<s:iterator>标签中的 index),还可以通过 $first、$middle及 $last,ng-repeat 指令返回布尔值。
4、隐藏和显示
对于菜单、上下文敏感的工具以及很多其他情况来说,显示和隐藏元素是一项核心功能。
ng-show 和 ng-hide 指令的功能是等价的,但是运行效果正好相反。
ng-show 在表达式为 true 时将会显示元素,为 false 时将会隐藏元素;而 ng-hide 则恰好相反。
工作原理:根据实际情况把元素的样式设置为 display : block 来显示元素;设置为 display : none 来隐藏元素。
5、CSS 类和样式
目前你已经可以在应用中动态地设置 CSS 类和样式了,只有使用{{ }}插值语法把它们进行数据绑定即可,甚至可以在模板中构造 CSS 类名的部分匹配方式。
.menu-disabled-true { color: gray; }
使用以下模板,可以将功能显示成禁用状态:
<div ng-controller="MenuController"> <ul> <li class="menu-disabled-{{isDisabled}}" ng-click="DisabledIt()">Click</li> ... </ul> </div>
这样通过控制器来设置 isDisabled 属性:
function MenuController($scope) { $scope.isDisabled = false; $scope.disabledIt = function() { $scope.isDisabled = true; } }
这样,只有 isDisabled 为 true 时,拼接出来的才是 menu-disabled-true,CSS 样式才会起作用。
当使用插值的方式绑定内联样式的时候,同样适用,例如 style = "{{some.expression}}"。
但是由于这种方式并不灵活,后期维护困难,所以 Angular 中推荐使用 ng-class 和 ng-style 指令。
这两个指令都可以接受一个表达式,表达式执行的结果可能是如下取值之一:
- 表示 CSS 类名的字符串,以空格分隔
- CSS 类名数组
- CSS 类名到布尔值的映射
我们可以如下实现显示错误和警告信息的功能:
.error { background-color: red; } .warning { background-color: yellow; } <div ng-controller="HeaderController"> ... <div ng-class="{error: isError, warning: isWarning}">{{messageText}}</div> ... <button ng-click="showError()">Simulate Error</button> <button ng-click="showWarning()">Simulate Warning</button> </div> function HeaderController($scope) { $scope.isError = false; $scope.isWarning = false; $scope.showError = function () { $scope.messageText = 'This is an error'; $scope.isError = true; $scope.isWarning = false; }; $scope.showWarning = function () { $scope.messageText = 'Just a warning, Please carry on.'; $scope.isWarning = true; $scope.isError = false; } }
你会发现这样实现的很优雅,而且容易维护,下面还可以做一个更炫的事情,例如,把表格中被选中的行进行高亮显示。
首先,在 CSS 中设置一个样式:
.selected { background-color: lightgreen; }
在模板中,我们把 ng-class 设置为 {selected: $index == selectedRow},当模型属性 selectedRow 的值等于 ng-repeat 中的 $index 时,selected 样式就会设置到对应的那一行。
<table ng-controller="RestaurantTableController"> <tr ng-repeat="restaurant in directory" ng-click="selectRestaurant($index)" ng-class="{selected : $index == selectedRow}"> <td>{{restaurant.name}}</td> <td>{{restaurant.cuisine}}</td> </tr> </table>
创建控制器:
1 var app = angular.module('app', []); 2 3 app.controller('RestaurantTableController', function ($scope) { 4 $scope.directory = [{name: 'The Handsome Heifer', cuisine: 'BBQ'}, 5 {name: 'Green\'s Green Greens', cuisine: 'Salads'}, 6 {name: 'House of Fine Fish', cuisine: 'Seafood'}]; 7 }); 8 9 $scope.selectRestaurant = function (row) { 10 $scope.selectedRow = row; 11 }
显示效果如图:
特别感谢:《用 AngularJS 开发下一代 Web 应用》
AngularJS 的常用特性(二)的更多相关文章
- AngularJS 的常用特性(五)
13.使用路由和 $location 切换视图 对于一些单页面应用来说,有时候需要为用户展示或者隐藏一些子页面视图,可以利用 Angular 的 $route 服务来管理这种场景. 你可以利用路由服务 ...
- AngularJS 的常用特性(一)
前言:AngularJS 是一款来自 Google 的前端 JS 框架,该框架已经被应用到了 Google 的多款产品中,这款框架最核心特性有:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入 ...
- AngularJS 的常用特性(四)
11.使用 Module(模块) 组织依赖关系 Angular 里面的模板,提供了一种方法,可以用来组织应用中一块功能区域的依赖关系:同时还提供了一种机制,可以自动解析依赖关系(又叫依赖注入),一般来 ...
- AngularJS 的常用特性(三)
6.表达式 在模板中使用表达式是为了以充分的灵活性在模板.业务逻辑和数据之间建立联系,同时又能避免让业务逻辑渗透到模板中. <div ng-controller="SomeContr ...
- C#网络程序设计(1)网络编程常识与C#常用特性
网络程序设计能够帮我们了解联网应用的底层通信原理! (1)网络编程常识: 1)什么是网络编程 只有主要实现进程(线程)相互通信和基本的网络应用原理性(协议)功能的程序,才能算是真正的网 ...
- Unity3D编辑器扩展(五)——常用特性(Attribute)以及Selection类
前面写了四篇关于编辑器的: Unity3D编辑器扩展(一)——定义自己的菜单按钮 Unity3D编辑器扩展(二)——定义自己的窗口 Unity3D编辑器扩展(三)——使用GUI绘制窗口 Unity3D ...
- 常用模块二(hashlib、configparser、logging)
阅读目录 常用模块二 hashlib模块 configparse模块 logging模块 常用模块二 返回顶部 hashlib模块 Python的hashlib提供了常见的摘要算法,如MD5,SH ...
- 第三节:Vuejs常用特性2和图书案例
一. 常用特性2 1. 监听器 用watch来响应数据的变化, 一般用于异步或者开销较大的操作, watch 中的属性 一定是data 中 已经存在的数据!!! 当需要监听一个对象的改变时,普通的wa ...
- C++11常用特性介绍——auto类型修饰符
1.C++11常用特性介绍 从本篇开始介绍C++11常用特性,大致分:关键字及新语法.STL容器.多线程.智能指针内存管理,最后讲一下std::bind和std::function 二.关键字和新语法 ...
随机推荐
- JDBC 中 socketTimeout 的作用
如果我们把socketTimeout设置如下: socketTimeout=60000; 这意味着60秒以内服务器必须开始给客户端吐数据,以保持socket的活性.配置成60秒,一般查询都不会遇到问题 ...
- Buffer Pool--SQL Server:Memory Manager 对象
--=================================================================SELECT * FROM sys.sysperfinfoWHER ...
- SQL Union 和Union All 的区别
Union与Union All的区别 如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字.union(或称为联合)的作用是将多个结果合并 ...
- Java : java.util.ConcurrentModificationException
在删除 List 元素的时候,要用 Iterator,不要直接遍历 List,否则会出现 Fatal Exception: java.util.ConcurrentModificationExcept ...
- Mybatis框架 使用接口Mapper实现数据库的crud操作
Mybatis的Mapper接口方式实现简单crud操作: 1.创建实体类 与数据库对应 我的实体类是<Student> package com.hxzy.mybatis.pojo; ...
- BZOJ 2388--旅行规划(分块&单调栈&二分)
2388: 旅行规划 Time Limit: 50 Sec Memory Limit: 128 MBSubmit: 405 Solved: 118[Submit][Status][Discuss] ...
- 引入阿里的druid
Druid首先是一个数据库连接池,但它不仅仅是一个数据库连接池,它还包含一个ProxyDriver,一系列内置的JDBC组件库,一个SQL Parser. Druid支持所有JDBC兼容的数据库,包括 ...
- Dubbo自定义日志拦截器
前言 上一篇文章 Spring aop+自定义注解统一记录用户行为日志 记录了 web层中通过自定义注解配合Spring aop自动记录用户行为日志的过程.那么按照分布式架构中Dubbo服务层的调用过 ...
- solr安装教程
Solr Solr is the popular, blazing-fast, open source enterprise search platform built on Apache Lucen ...
- 在 iOS 中使用 iconfont
如何使用自定义字体 在讲icon font之前,首先先来看看普通自定义字体是如何在ios中使用的,两个原理是一样的.这里以KaushanScript-Regular为例: Step 1: 导入字体 ...