angularJS实现表格部分列展开缩起示例代码
作者：争取！…… 发布时间：2024-04-16 10:40:42
标签：angularJS,表格,展开,缩起
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
0
投稿猜你喜欢
前言工作中偶尔会遇到文件去重的事情，收到一大堆文件，名称各不相同，分析文件的时候发现有不少重复的文件，导致工作效率低下，那么，这里就写了一个- UnicodeDecodeError: 'utf-8' codec can't decod有一次报错如下：Unico
- URL 编码是什么东东呢？看看我从网上抄的定义： 引用: url编码是一种浏览器用来打包
- 1. python中的变量：python中的变量声明不需要像C++、Java那样指定变量数据类型（int、float等），因为python会
- 前面介绍了关于用户账户的User表，但是现实生活中随着问题的复杂化数据库存储的数据不可能这么简单，让我们设想有另外一张表，这张表和User有
- 1 回表的性能消耗无论单列索引 还是 联合索引，一个索引就对应一个独立的B+索引树，索引树节点仅包含：索引里的字段值主键值即使根据索引树按条
- 1.我的MySQL中的start_time存储的是2018-03-21 10:55:32格式的时间，我需要按照YYYY-MM-DD格式来查询
- 本文介绍了python opencv之SURF算法示例，分享给大家，具体如下：目标：SURF算法基础opencv总SURF算法的使用原理：上
- 前言最近在爬行 nosec.org 的数据，看了下需要模拟登录拿到cookie后才能访问想抓的数据，重要的是 nosec.org 的登录页面
- 前言：tkinter提供了3种布局管理方式：1、pack2、grid3、place每种布局管理器都非常有用，根据不同的需求，选择对应的布局方
- 墙上时钟与单调时钟墙上时钟墙上时钟也称为墙上时间。大多是1970年1月1日（UTC）以来的秒数和毫秒数。墙上时间可以和NTP（Network
- 目录1、原始需求2、解决方案3、canal介绍、安装canal的工作原理架构安装4、验证1、原始需求既要同步原始全量数据，也要实时同步MyS
- 这里首先要介绍官方文档，对python有了进一步深度的学习的大家们应该会发现，网上不管csdn或者简书上还是什么地方，教程来源基本就是官方文
- 1.GridView无代码分页排序：效果图：1.AllowSorting设为True，aspx代码中是AllowSorting="
- 一、基础知识1、MySQL-python的安装下载，然后 pip install 安装包2、python编写通用数据库程序的API规范（1）
- 本文给大家介绍Python文件处理相关知识，具体内容如下所示：1.文件的常见操作文件是日常编程中常用的操作，通常用于存储数据或应用系统的参数
- 简单的学习下利用socket来建立客户端和服务端之间的连接并且发送数据1. 客户端socketClient.py代码import socke
- 具体的实现代码，如下：下面会给简单的说明。<?php /* 1. 配置好你的数据库连接 2. 注意数据表名的前缀 默认为dede_ 3
- 如下所示：import matplotlib.pyplot as pltimport numpy as npa = np.array([1,
- 设计中文网站的朋友都会有这样的体会，Dreamweaver功能虽然强大，但要按照中文的行文习惯实现每个
