脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularJS表格展开缩起

angularJS实现表格部分列展开缩起示例代码

 更新时间：2021年09月09日 11:09: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>

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

您可能感兴趣的文章:

相关文章

  • Angular(5.2->6.1)升级小结

    Angular(5.2->6.1)升级小结

    今天小编就为大家分享一篇关于Angular(5.2->6.1)升级小结，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2018-12-12
  • Angular限制input框输入金额（是小数的话只保留两位小数点）

    Angular限制input框输入金额（是小数的话只保留两位小数点）

    最近做项目遇到这样的需求输入框要求输入金额，只能输入数字，可以是小数，必须保留小数点后两位。下面分为两部分代码给大家介绍实现代码，需要的的朋友参考下吧
    2017-07-07
  • Angular2 自定义validators的实现方法

    Angular2 自定义validators的实现方法

    angular 当需要form表单需要验证时，angular自带了许多校验器，但是很多时候自带的无法满足业务需求，这时候就需要自定义的校验器，下面通过本文给大家分享Angular2 自定义validators的实现方法，需要的朋友参考下吧
    2017-07-07
  • angularJS之$http：与服务器交互示例

    angularJS之$http：与服务器交互示例

    $http是angular中的一个核心服务，本篇文章主要介绍了angularJS之$http：与服务器交互示例，具有一定的参考价值，有兴趣的可以了解一下。
    2017-03-03
  • AngularJS中实现动画效果的方法

    AngularJS中实现动画效果的方法

    本文主要介绍AngularJS 动画,这里对动画的资料详细介绍并附有效果图和代码实例,有需要的小伙伴参考下
    2016-07-07
  • 详解如何在angular2中获取节点

    详解如何在angular2中获取节点

    本篇文章主要介绍了如何在angular2中获取节点，详细的介绍了几种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • angular分页指令操作

    angular分页指令操作

    这篇文章主要为大家详细介绍了angular分页指令操作的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • AngularJS 的$timeout服务示例代码

    AngularJS 的$timeout服务示例代码

    这篇文章主要介绍了AngularJS 的$timeout服务示例代码,需要的朋友可以参考下
    2017-09-09
  • 对angular2中的ngfor和ngif指令嵌套实例讲解

    对angular2中的ngfor和ngif指令嵌套实例讲解

    今天小编就为大家分享一篇对angular2中的ngfor和ngif指令嵌套实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例

    AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例

    这篇文章主要介绍了AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能,结合实例形式分析了AngularJS自定义过滤器的定义及数组过滤相关操作技巧,需要的朋友可以参考下
    2018-04-04

最新评论