效果如下图所示:

使用表格显示用户信息,当点击某条用户信息时,在其下方展开一行进行展示。

index.html

  1. <!DOCTYPE html>
  2.  
  3. <html ng-app="myApp">
  4. <head>
  5. <title>TODO supply a title</title>
  6. <meta charset="UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <link rel="stylesheet" href="../css/uikit.css"/>
  9. <link rel="stylesheet" href="../css/my-uikit.css"/>
  10. </head>
  11. <body>
  12.  
  13. <div class="uk-panel" ng-controller="UserCtrl">
  14. <table class="uk-table uk-table-hover uk-table-striped">
  15. <thead class="uk-bg-primary">
  16. <tr>
  17. <th>Name</th>
  18. <th>Email</th>
  19. </tr>
  20. </thead>
  21. <tbody ng-repeat="user in users" ng-click="selectUser(user)"
  22. ng-switch on="isSelected(user)">
  23. <tr>
  24. <td>{{user.name}}</td>
  25. <td>{{user.email}}</td>
  26. </tr>
  27. <tr ng-switch-when="true">
  28. <td colspan="2" class="uk-bg-success">{{user.desc}}</td>
  29. </tr>
  30. </tbody>
  31. </table>
  32. </div>
  33.  
  34. </body>
  35.  
  36. <script src="../js/angular.js"></script>
  37. <script src="index.js"></script>
  38. </html>

index.js

  1. var myApp = angular.module('myApp', []);
  2.  
  3. myApp.controller('UserCtrl', ['$scope', function($scope){
  4. $scope.users = [
  5. {
  6. name:'张三',
  7. email:'zhangsan@gmail.com',
  8. desc: '张三的详细信息...'
  9. },
  10. {
  11. name:'李四',
  12. email:'lisi@123.com',
  13. desc: '李四的详细信息...'
  14. },
  15. {
  16. name:'王五',
  17. email:'wangwu@qq.com',
  18. desc: '王五的详细信息...'
  19. }
  20. ];
  21.  
  22. $scope.selectUser = function(user){
  23. $scope.selectedUser = user;
  24. };
  25.  
  26. $scope.isSelected = function(user){
  27. return $scope.selectedUser === user;
  28. };
  29. }]);

:ng-repeat指令用于渲染集合元素,并持续监视数据源的变化,只要数据源发生变化,其会立即重新渲染视图模板,ng-repeat经过了高度的优化,以便于对DOM书的影响最小化。

:ng-switch on 结合ng-switch-when使用,还有ng-switch-default,其用法与java重点switch用法差不多,on用于制定参数值,ng-switch-when类似于case 。

ng-repeat 与ng-switch的简单应用的更多相关文章

  1. Part 6 AngularJS ng repeat directive

    ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...

  2. zoj 1622 Switch 开关灯 简单枚举

    ZOJ Problem Set - 1622 Switch Time Limit: 2 Seconds      Memory Limit: 65536 KB There are N lights i ...

  3. Angular6之ng build | ng build --aot | ng build --prod 差异

    由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...

  4. 在库中使用schematics——ng add与ng update

    起步 创建一个angular库 ng new demo --create-application=false ng g library my-lib 可见如下目录结构 ├── node_modules ...

  5. 使用if和switch制作简单的年龄生肖判断

    -年 查询 --> var oDiv =document.getElementById("cont"); var oYear = document.getElementByI ...

  6. Part 14 ng hide and ng show in AngularJS

    ng-hide and ng-show directives are used to control the visibility of the HTML elements. Let us under ...

  7. Angular 中后台前端解决方案 - Ng Alain 介绍

    背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...

  8. Flume NG高可用集群搭建详解

    .Flume NG简述 Flume NG是一个分布式,高可用,可靠的系统,它能将不同的海量数据收集,移动并存储到一个数据存储系统中.轻量,配置简单,适用于各种日志收集,并支持 Failover和负载均 ...

  9. FLUME NG的基本架构

    Flume简介 Flume 是一个cloudera提供的 高可用高可靠,分布式的海量日志收集聚合传输系统.原名是 Flume OG (original generation),但随着 FLume 功能 ...

  10. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

随机推荐

  1. 【转】使用 vim + ctags + cscope + taglist 阅读源码

    原文网址:http://my.oschina.net/u/554995/blog/59927 最近,准备跟学长一起往 linux kernel 的门里瞧瞧里面的世界,虽然我们知道门就在那,但我们还得找 ...

  2. [转]Ubuntu Linux 安装 .7z 解压和压缩文件

    原文网址:http://blog.csdn.net/zqlovlg/article/details/8033456 安装方法: sudo apt-get install p7zip-full 解压文件 ...

  3. bzoj1145

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1145 神题...... 定义f(abcd)为高度排名为abcd的个数,例如闪电的个数为f(13 ...

  4. hdu4521-小明系列问题——小明序列(线段树区间求最值)

    题意:求最长上升序列的长度(LIS),但是要求相邻的两个数距离至少为d,数据范围较大,普通dp肯定TLE.线段树搞之就可以了,或者优化后的nlogn的dp. 代码为  线段树解法. #include ...

  5. 深入浅出 消息队列 ActiveMQ

    http://blog.csdn.net/jwdstef/article/details/17380471

  6. 好用的QT连接

    QT属性控件项目https://github.com/lexxmark/QtnProperty比特币交易软件https://github.com/JulyIGHOR/QtBitcoinTrader导航 ...

  7. 关于bootstrap--表单(水平表单)

    在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:1.在<form>元素是使用类名“form-horizontal”.2.配合Bootstrap框架的网格系统.(网格布局 ...

  8. <php>对文件的目录、属性、路径的操作

    //filetype("1.jpg");//当前路径用./或者不写:上一级用../: //echo filetype("./1.jpg"); //判断./1.j ...

  9. 未能载入文件或程序集“DAL”或它的某一个依赖项。系统找不到指定的文件。

    这个一般出如今三层给B层与D层之间加抽象工厂-接口-映射.时候出的错.出错的地方是抽象工厂. --如图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTA ...

  10. BNU10805:矩形神码的

    我们都知道,矩形是由两条对角线的,没错吧?(谜之声:这不是显然么!)这两条线的长度也是相等的,没错吧?(谜之声:这不废话么!)然后我们给定一条对角线的起始点和终止点的坐标,然后给定另一个对角线和他的夹 ...