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>

到此这篇关于angularJS实现表格部分列展开缩起示例代码的文章就介绍到这了,更多相关angularJS表格展开缩起内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-08

AngularJS中table表格基本操作示例

本文实例讲述了AngularJS表格基本操作.分享给大家供大家参考,具体如下: css内容: table, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } HTML正文: <body ng-app=""> <div ng-init="persons=[{'name':'zhangsan','age':'20'}, {'name':'lisi','age':'19'

AngularJS表格添加序号的方法

本文实例讲述了AngularJS表格添加序号的方法.分享给大家供大家参考,具体如下: 1.问题背景 AngularJS表格需要序号,可以利用$index来作为序号 2.实现实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之表格序号</title> <link rel="stylesheet" h

AngularJS 与Bootstrap实现表格分页实例代码

AngularJS 从开始发布到现在使用的开发的者越来越多,也表明大多数做前端的朋友在往这边转,毕竟是Google 公司出品的产品啊,所以最近自己也在学习这部分知识. AngularJS  Bootstrap实现表格分页: 最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能. 首先表格的数据源来自于,Server.js 点击下载.通过get取数后

详解AngularJS中的表格使用

表格数据本质上通常是重复的.ng-repeat指令,可以用来方便地绘制表格.下面的示例说明使用ng-repeat指令来绘制表格. <table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td>

AngularJS表格样式简单设置方法示例

本文实例讲述了AngularJS表格样式简单设置方法.分享给大家供大家参考,具体如下: 1.问题背景 AngularJS表格table,利用样式设置表格间隔色 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之表格设置样式</title> <link rel="stylesheet" h

AngularJS实现表格的增删改查(仅限前端)

用AngularJS实现对表格的增删改查(仅限前端),具体代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现表格的增删改查</title> <meta http-equiv="keywords" content="keyword1,keyword2,keywo

利用python模拟sql语句对员工表格进行增删改查

本文主要给大家介绍了关于python模拟sql语句对员工表格进行增删改查的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 具体需求: 员工信息表程序,实现增删改查操作: 可进行模糊查询,语法支持下面3种: select name,age from staff_data where age > 22                  多个查询参数name,age 用','分割 select * from staff_data where dept = 人事 select * from

Vue+Mock.js模拟登录和表格的增删改查功能

前言 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 5 项目不背锅(等后端给接口的话可能会背锅) 等等优点,最后一条我加的. 第一步先安装mock.js npm install mockjs --save-dev 第二步使用 mock.js import Mock from 'mockjs' 哪里用就在哪里引入.我是在项目src/mock/index.js里面使用moc

jQuery对table表格进行增删改查

最近要处理一些前端的工作,重新学习了一下jQuery,感觉还是那么的锋利啊!!! 总结了一下对table的增删改查,写一篇留着以后自己recode. 1.首先我自己写了一个简单的div布局. 2.实现几个用<a>标签做的按钮的功能 分别是新增 修改 删除 查询和返回. 代码如下 html+css(原谅我写在一起吧..毕竟渲染不是我的强项) <html> <head><title>测试数据</title></head> <styl

python列表的增删改查实例代码

names=["zhao00","qian01","sun02","li03","li03","li03","zhou04"] #print(names[]) 打印错误 print(names) 增 names.append("wu05") #增加到最后 names.insert(1,"zheng06") #增加到指定位置 改

vue.js+Element实现表格里的增删改查

新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充 之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js 下面就介绍一下vue.js应用在表格里的增删改查 首先引入一下element的js <script src="plugins/element-ui/index.js"></script> 然后引入需要用到的vue

AngularJS中如何使用$http对MongoLab数据表进行增删改查

主页面: <button ng-click="loadCourse()">Load Course</button> <button ng-click="toggleAddCourse(true)">Add New Course</button> <ng-includce src="'course_list.html'"></ng-include> <ng-include

vue实现表格数据的增删改查

在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注于对数据的操作和处理. 比如我们有一个这样的页面: 我们在这个页面里,就实现了增删改查4个功能,点击链接查看demo[http://www.xiabingbao.com/demo/vue-curd/index.html]. 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行:

vue实现表格增删改查效果的实例代码

整理文档,搜刮出一个vue实现表格增删改查效果的实例代码,稍微整理精简一下做下分享. 实现效果 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', p

BootStrap实现带有增删改查功能的表格(DEMO详解)

前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.CSS也经常给的不全,自己经过大概一个月左右的时间,把表格封装了一下,希望能分享给大家. 表格封装了3个版本,接下来给大家展示一下样式和代码. 版本一 1. 样式 表格布局: 添加:添加一行新的空白代码 修改:选中可修改的列,点击需要修改的单元格,即可变成可编辑的状态. 2.代码 @using Dat