ng-if实现显示隐藏案例

最新推荐文章于 2024-10-21 07:50:43 发布

Android丶ztz

最新推荐文章于 2024-10-21 07:50:43 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS

本文链接：https://blog.youkuaiyun.com/TianzhuZ/article/details/78322140

AngularJS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现按钮点击后动态显示或隐藏表格的示例。通过定义一个控制器并使用$scope.myVar变量来控制<table>元素的可见性。当用户点击按钮时触发toggle函数，改变myVar的布尔值状态，从而实现<table>元素的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击按钮实现显示ng-if</title>
    <script src="AngularJS/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function ($scope) {
            $scope.toggle = function () {
                $scope.myVar = !$scope.myVar;
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <button ng-click="toggle()">点击按钮显示div</button>

    <table ng-if="myVar" border="1 dashed blue">
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
        </tr>
    </table>
</body>
</html>