angularJS實現(xiàn)表格部分列展開縮起示例代碼

更新時間：2021年09月09日 11:09:42 作者：爭??！……

這篇文章主要介紹了angularJS實現(xiàn)表格部分列展開縮起示例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

AngularJS 簡介

AngularJS 是一個 JavaScript 框架。它可通過 <script> 標(biāo)簽添加到 HTML 頁面。

AngularJS 通過指令擴展了 HTML，且通過表達(dá)式綁定數(shù)據(jù)到 HTML。

AngularJS 是一個 JavaScript 框架

AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。

AngularJS 是以一個 JavaScript 文件形式發(fā)布的，可通過 script 標(biāo)簽添加到網(wǎng)頁中：

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

下面看下angularJS實現(xiàn)表格部分列展開縮起示例代碼，效果圖如下所示：

在這里插入圖片描述

<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) {
            //默認(rèn)縮起
            $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 >產(chǎn)品</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>

到此這篇關(guān)于angularJS實現(xiàn)表格部分列展開縮起示例代碼的文章就介紹到這了,更多相關(guān)angularJS表格展開縮起內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: