效果如下图所示：
使用表格显示用户信息，当点击某条用户信息时，在其下方展开一行进行展示。
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 。