在Angular中如何实现隐藏显示
这篇文章主要介绍了Angular实现点击按钮控制隐藏和显示功能,结合实例形式分析了AngularJS简单控制页面元素显示与隐藏的相关操作技巧,需要的朋友可以参考下
本文实例讲述了Angular实现点击按钮控制隐藏和显示功能。分享给大家供大家参考，具体如下：
先来看看运行效果：
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net Angular显示隐藏</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
}
</style>
<script src="angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.show=true;
$scope.fun=function () {
$scope.show=!$scope.show;
console.log($scope.show);
}
$scope.hide=true;
$scope.func=function () {
$scope.hide=!$scope.hide;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<p class="box"ng-show="show"></p>
<button ng-click="fun()">点击切换</button>
<p ng-class="{box:hide}"></p>
<button ng-click="func()">按钮</button>
</body>
</html>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是在Angular中如何实现隐藏显示的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何在Ubuntu 24.04上安装Angular
Mar 23, 2024 pm 12:20 PM
Angular.js是一种可自由访问的JavaScript平台，用于创建动态应用程序。它允许您通过扩展HTML的语法作为模板语言，以快速、清晰地表示应用程序的各个方面。Angular.js提供了一系列工具，可帮助您编写、更新和测试代码。此外，它还提供了许多功能，如路由和表单管理。本指南将讨论在Ubuntu24上安装Angular的方法。首先，您需要安装Node.js。Node.js是一个基于ChromeV8引擎的JavaScript运行环境，可让您在服务器端运行JavaScript代码。要在Ub
如何隐藏Windows 11任务栏图标？
Jan 06, 2024 am 08:38 AM
在win11系统中，如果我们觉得任务栏中的图标麻烦，可以选择将它隐藏到任务栏角溢出界面中，不过下方打开的应用任务栏中的图标是不可以隐藏的，下面就跟着小编来看一下具体的情况吧。win11任务栏图标怎么隐藏：一、居中图标1、首先，如果我们要隐藏下方任务栏中的图标，可以右键选中，点击“从任务栏取消固定”2、但是如果我们打开了这个应用，并且正在使用它，那就是无法隐藏的。二、右下角图标1、如果要隐藏右下角的应用图标，首先打开系统设置。2、然后点击左侧边栏的“个性化”，如图所示。3、接着点击进入右侧的任务栏
不拉黑不删除怎么隐藏微信好友？不拉黑不删除隐藏微信好友的方法
Mar 13, 2024 pm 07:19 PM
不拉黑不删除怎么隐藏微信好友？不少的用户们想隐藏一些好友不知道要怎么去操作，下面就让本站来为用户们来仔细的介绍一下不拉黑不删除隐藏微信好友的方法吧。 不拉黑不删除隐藏微信好友的方法 方法一： 1、首先打开微信软件，在微信页面找到通讯录，点击”我的“。 2、然后我们进入到设置页面。 3、找到”隐私“选项，点击进去。 4、接着点击”不让他看“。 5、进入到不让她看页面，点击”+“勾选需要隐藏的好友
抖音短视频怎么隐藏作品 隐藏个人视频作品的方法
Mar 12, 2024 pm 12:49 PM
抖音短视频app软件内提供的短视频作品非常多，随心所欲想看就看，而且都是永久免费提供的，不同类型的视频直播频道都是开放的，所有的视频内容都是原创的，带给大家最满意的观看方式。输入账号在线登录，各种精彩万分的短视频推送，都是根据大家日常看的，精准推荐，还能进入直播间与主播互动聊天，让你的心情更加愉悦。个人上传的作品也能隐藏起来，非常简单一键设置，刷到哪里看到哪，上下滑动无数网友的实时评论抢先看，还能分享日常的生活动态，现在小编在线详细为抖音短视频用户们推送隐藏个人视频作品的方法。首先打开抖音短
小米14如何隐藏灵动岛？
Mar 18, 2024 pm 03:40 PM
除了令人惊叹的硬件配置和出色的功能，小米14还隐藏着一个让人着迷的地方—灵动岛。在这里，用户可以尽情享受个性化定制以及创意无限的手机体验。不过不是所有人都喜欢这个功能的，那么，小米14如何隐藏灵动岛呢？让我们一起了解一下吧。小米14如何隐藏灵动岛？1.打开小米14手机的设置应用。2.滚动找到“特色功能”选项并点击进入。3.在特色功能页面中找到“隐藏灵动岛”选项并打开它。4.确认开启隐藏灵动岛后，返回到桌面即可看到灵动岛已被隐藏。
抖音隐藏作品的详细教程
Mar 25, 2024 pm 03:11 PM
1、首先点击【+】进行拍摄。2、然后点击右下角的勾确认完成拍摄。点击】下一步【，3、点击【谁可以看】。选择【私密】即可，情境二：已拍作品，1、点击【我】，选择【作品】。2、点击右旁【三点】标识。3、向左滑动，找到【权限设置】，4、点击】设为私密】即可。
深度清理手机隐藏垃圾的方法（彻底清除手机内存垃圾）
Jun 01, 2024 am 09:29 AM
手机已经成为我们日常生活中不可或缺的一部分，随着科技的不断进步和智能手机的普及。这些垃圾文件占用了宝贵的存储空间，随着时间的推移、手机中会积累大量的隐藏垃圾，并且会导致手机性能下降，然而。了解如何深度清理手机隐藏垃圾成为每个手机用户必备的知识。一、查找并清除无用的应用缓存二、删除不再使用的应用程序三、清理照片和视频缓存四、彻底清理临时文件和下载文件夹五、整理和清理联系人和短信记录六、清理系统缓存七、卸载无用的系统应用程序八、清理浏览器缓存和历史记录九、删除无效的音乐和音频文件十、优化手机文件系统
桌面布局已锁定的原因及解决方法
Feb 19, 2024 pm 06:08 PM
显示桌面布局已锁定是怎么回事在使用计算机的过程中，有时我们可能会遇到显示桌面布局已锁定的情况。这个问题意味着我们无法自由地调整桌面图标的位置或改变桌面背景等操作。那么，显示桌面布局已锁定到底是怎么回事呢？一、理解桌面布局和锁定功能首先，我们需要了解桌面布局和桌面锁定这两个概念。桌面布局是指桌面上各个元素的排列方式，包括快捷方式、文件夹和小部件等。我们可以自由
