angularJS实现表格部分列展开缩起示例代码
作者：争取！…… 时间：2024-04-16 10:40:42
AngularJS 简介
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS 是一个 JavaScript 框架
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
下面看下angularJS实现表格部分列展开缩起示例代码，效果图如下所示：
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<!-- <script src='https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js'></script>-->
<style type="text/css">
table, tr, td, caption{
border:1px solid #666;
border-collapse:collapse;
background-color:rgb(210, 219, 236);
}
td, caption{
/*font-family:'微软雅黑';*/
font-family: "Fira Code Light";
font-size:12px;
text-align:center;
padding:3px 15px;
}
caption{
border-bottom:none;
cursor:pointer;
}
</style>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//默认缩起
$scope.myVar = true
//显示隐藏按钮
$scope.openClose = function () {
$scope.myVar = !$scope.myVar;
$scope.myVar1 = !$scope.myVar1;
};
});
</script>
</head>
<body>
<table ng-app="myApp" ng-controller="myCtrl">
<caption ng-click="openClose()">显示/隐藏价格</caption>
<tr>
<td >产品</td>
<td ng-hide = 'myVar1' ng-click="openClose()">...</td>
<td ng-hide = 'myVar'>价格</td>
<td ng-hide = 'myVar'>价格</td>
<td ng-hide = 'myVar'>价格</td>
<td ng-hide = 'myVar'>价格</td>
<td >销量</td>
</tr>
<tr>
<td>A</td>
<td ng-hide = 'myVar1'>...</td>
<td ng-hide = 'myVar'>18元</td>
<td ng-hide = 'myVar'>28元</td>
<td ng-hide = 'myVar'>38元</td>
<td ng-hide = 'myVar'>48元</td>
<td>2</td>
</tr>
<tr>
<td>B</td>
<td ng-hide = 'myVar1'>...</td>
<td ng-hide = 'myVar'>77元</td>
<td ng-hide = 'myVar'>88元</td>
<td ng-hide = 'myVar'>88元</td>
<td ng-hide = 'myVar'>88元</td>
<td>3</td>
</tr>
<tr>
<td>C</td>
<td ng-hide = 'myVar1'>...</td>
<td ng-hide = 'myVar'>66元</td>
<td ng-hide = 'myVar'>88元</td>
<td ng-hide = 'myVar'>88元</td>
<td ng-hide = 'myVar'>88元</td>
<td>4</td>
</tr>
</table>
</body>
</html>
来源：https://blog.csdn.net/rsdtfgyuhygu/article/details/120162464
标签：angularJS,表格,展开,缩起
0
投稿猜你喜欢
Python上下文管理器详细使用教程
2021-06-24 05:47:35
Python区块链Creating Miners教程
2021-03-25 11:39:27
详解利用装饰器扩展Python计时器
2023-04-08 20:32:16
python 计算两个列表的相关系数的实现
2021-10-07 10:43:57
Python实现自动发消息自定义内容的操作代码
2023-10-17 18:01:53
vue简单的二维数组循环嵌套方式
2024-04-27 16:09:56
用Python获取摄像头并实时控制人脸的实现示例
2022-12-11 09:50:21
python re.sub()替换正则的匹配内容方法
2022-09-13 08:10:30
详解Python3中字符串中的数字提取方法
2021-02-22 06:08:15
Oracle7.X 回滚表空间数据文件误删除处理方法
2010-07-28 12:54:00
Python内置函数—vars的具体使用方法
2021-05-07 04:09:57
详解为什么说Golang中的字符串类型不能修改
2024-02-04 09:24:45
python通过安装itchat包实现微信自动回复收到的春节祝福
2022-07-09 20:36:26
Sql Server中的事务介绍
2024-01-22 01:04:37
浅谈vue项目可以从哪些方面进行优化
2024-05-09 15:19:50
python绘制漏斗图步骤详解
2021-06-17 22:57:57
Python: glob匹配文件的操作
2023-05-30 00:36:24
PHP图片上传类带图片显示
2024-05-22 10:06:19
Vue.js实现一个自定义分页组件vue-paginaiton
2024-05-02 16:36:36
Python3标准库之dbm UNIX键-值数据库问题
2024-01-26 15:56:11