效果如下图所示：

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

index.html

<!DOCTYPE html>

<html ng-app="myApp">

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

        <link rel="stylesheet" href="../css/my-uikit.css"/>

    </head>

    <body>

        <div class="uk-panel" ng-controller="UserCtrl">

            <table class="uk-table uk-table-hover uk-table-striped">

                <thead class="uk-bg-primary">

                    <tr>

                        <th>Name</th>

                        <th>Email</th>

                    </tr>

                </thead>

                <tbody ng-repeat="user in users" ng-click="selectUser(user)"

                       ng-switch on="isSelected(user)">

                    <tr>

                        <td>{{user.name}}</td>

                        <td>{{user.email}}</td>

                    </tr>

                    <tr ng-switch-when="true">

                        <td colspan="2" class="uk-bg-success">{{user.desc}}</td>

                    </tr>

                </tbody>

            </table>

        </div>

    </body>

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

    <script src="index.js"></script>

</html>

index.js

var myApp = angular.module('myApp', []);

myApp.controller('UserCtrl', ['$scope', function($scope){

        $scope.users = [

            {

                name:'张三',

                email:'zhangsan@gmail.com',

                desc: '张三的详细信息...'

            },

            {

                name:'李四',

                email:'lisi@123.com',

                desc: '李四的详细信息...'

            },

            {

                name:'王五',

                email:'wangwu@qq.com',

                desc: '王五的详细信息...'

            }

        ];

        $scope.selectUser = function(user){

            $scope.selectedUser = user;

        };

        $scope.isSelected = function(user){

            return $scope.selectedUser === user;

        };

}]);

: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. 国威电话机WS824(5D)-3型调试文档--可以转行啦

    多了一万多搞的机器,花了我和同事们两三个晚上,最近还要打技术支持得到的经验... 可以转行作弱电啦啦~~~) 一,外线分组调试: 默认设置为所有内线端口可用1,2,13,14,15,16打出.(16个 ...

  2. 2015必须要看的APP源码

    多媒体类型 哔哩哔哩(bilibili)客户端源码 一个高仿哔哩哔哩(bilibili)客户端的开源项目,效果不错 下载地址: http://www.apkbus.com/forum.php?mod= ...

  3. Struts2标签库之iterator

    传说中的第一种方式,这种在Struts2.1权威指南的例子中也木有说明白: <%@ page language="java" contentType="text/h ...

  4. 关于selenium中的sendKeys()隔几秒发送一个字符

    看一下你的IEDriverServer.exe是不是64位的,我也遇到了这样的问题,换成32位的IEDriverServer.exe,瞬间速度快了

  5. DOS批处理命令判断操作系统版本、执行各版本对应语句

    DOS批处理命令判断操作系统版本.执行各版本对应语句   昨天在家里试用  netsh interface ip set address 这些命令更改上网IP.DNS.网关等,今天将那些代码拿来办公室 ...

  6. Spring事务管理器分类

    Spring并不直接管理事务,事实上,它是提供事务的多方选择.你能委托事务的职责给一个特定的平台实现,比如用JTA或者是别的持久机制.Spring的事务管理器可以用下表表示: 事务管理器的实例 目标 ...

  7. jquery ajax提交json格式的数据，后台接收并显示各个属性

    我的表单如下: <form onsubmit="return false"> <ul> <li><span>用户名</span ...

  8. Android BLE开发之Android手机与BLE终端通信

    本文来自http://blog.csdn.net/hellogv/ ,引用必须注明出处! 近期穿戴设备发展得非常火.把相关技术也带旺了,当中一项是BLE(Bluetooth Low Energy).B ...

  9. git config配置文件 (共有三个配置文件)

    设置 git status的颜色. git config --global color.status auto 一.Git已经在你的系统中了,你会做一些事情来客户化你的Git环境.你只需要做这些设置一 ...

  10. Fragment 点击事件的穿透和重叠bug

    从A fragment跳转到B fragment ,为了返回时不从新加载A fragment内容,通常使用add方法来将a添加到后退栈. 在B Fragment 中点击一个空白区域,如果A Fragm ...