Angular学习记录-显示与隐藏

最新推荐文章于 2022-06-17 15:42:31 发布

web_LamHo

最新推荐文章于 2022-06-17 15:42:31 发布

阅读量1.4k

点赞数

分类专栏： Angular学习文章标签： angular

本文链接：https://blog.csdn.net/web_LamHo/article/details/51277855

版权

Angular学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Angular学习记录-显示与隐藏

在学习之前，首先声明以下，暂时日后更新的AngularJS学习记录系列的文章，都将会是结合本人正在看的《AngularJS 实战》书籍里的内容进行分享和个人观点及评价。

简单粗暴直接看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-repeat</title>
    <script src="../js/angular.min.js"></script>
    <style>
        body{font-size:12px;}
        ul{list-style-type: none;margin:0;padding:0;}
        div{margin:8px 0;}
    </style>
</head>
<body ng-app="app" ng-controller="myCtr">

    <div>
        <div ng-show="{{isShow}}">LamHo</div>
        <div ng-hide="{{isHide}}">LamHo@163.com</div>
        <ul ng-switch on="{{switch}}">
            <li ng-switch-when="1">LamHo</li><!--$scope.switch == 1-->
            <li ng-switch-when="2">LamHo@163.com</li><!--$scope.switch == 2-->
            <li ng-switch-default>更多</li><!--$scope.switch != 1 && $scope.switch != 2-->
        </ul>
    </div>
<script>
    var app = angular.module('app',[]);

    app.controller('myCtr',['$scope',function($scope){

        $scope.isShow = true;
        $scope.isHide = false;
        $scope.switch = 3;

    }])

</script>
</body>
</html>

由此可以看到控制显示和隐藏的方法，当然控制显示和隐藏的方式还可以用三目运算进行判断

web_LamHo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular学习记录-显示与隐藏

Angular学习记录-显示与隐藏在学习之前，首先声明以下，暂时日后更新的AngularJS学习记录系列的文章，都将会是结合本人正在看的《AngularJS 实战》书籍里的内容进行分享和个人观点及评价。
复制链接

扫一扫