ng-repeat 与ng-switch的简单应用

效果如下图所示：

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

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 。

转载于:https://www.cnblogs.com/yshyee/p/4273061.html

ng-repeat 与ng-switch的简单应用相关推荐

C#switch语句简单测试
switch的简单测试..... 代码: using System; using System.Collections.Generic; using System.Linq; using System ...
ng serve 和 ng build 的区别
在这个文档里有介绍. 在开发过程中,你通常会使用 ng serve 命令来借助 webpack-dev-server 在本地内存中构建.监控和提供服务.但是,当你打算部署它时,就必须使用 ng bui ...
switch的简单举例
switch的简单举例 switch的基本形式例子 switch的基本形式 switch语句的一般形式为: switch(表达式) {case 常量1: 语句1case 常量2: 语句2case 常 ...
Docker部署NG并设置 NG为静态文件管理器
Docker部署NG并设置 NG为静态文件管理器 1.docker拉取nginx镜像 docker pull nginx 或者docker pull nginx:指定版本号 2.检查拉去下来的镜像 d ...
angular项目集成ng zorro 和ng alain
angular项目集成 ng zorro和ng alain(mock 和acl权限)学习笔记这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
输入 ng build 或者 ng serve 之后没有任何输出的问题分析
Angular 应用,输入 ng build 命令,没有任何反应: ng version 命令的输出:显示的 CLI 版本号为 12.2.5 然而 package.json 里定义的版本为 ~9.1. ...
php ng 性能,PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍
PHP NG (你要愿意的话叫 PHP 5.7 也行)目前还在 alpha 开发阶段,但已经显示出惊人的性能提升.关键是仍保持对 PHP 5.6 的兼容性. Dmitry Stogov 在今年1月中旬 ...
php ng 性能,PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍_PHP
PHP NG (你要愿意的话叫 PHP 5.7 也行)目前还在 alpha 开发阶段,但已经显示出惊人的性能提升.关键是仍保持对 PHP 5.6 的兼容性. Dmitry Stogov 在今年1月中旬 ...
php ng 性能,PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍_PHP教程
PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍 PHP NG 你要愿意的话叫 PHP 5.7 也行)目前还在 alpha 开发阶段,但已经显示出惊人的性能提升.关键是仍保持对 PHP ...
05-if和switch的简单比较
1.if语句能够完成的功能,switch语句不一定能够完成. 比如:判断大小 int a = 10; if(a > 100) { } 这样的功能用switch很难完成. 2.if语句和switc ...

ng-repeat 与ng-switch的简单应用

ng-repeat 与ng-switch的简单应用相关推荐

最新文章

热门文章