angularJS控制不同div显示隐藏

最新推荐文章于 2022-04-02 14:56:18 发布
最新推荐文章于 2022-04-02 14:56:18 发布
阅读量1.4k 收藏
点赞数
文章标签： angularjs html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37701177/article/details/94601515
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示/隐藏测试</title>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
</head>
<body>

	<div ng-app="showApp" ng-controller="demo">
	<div ng-show ="toggle.show">
	<label >123</label>
	<button class="btn btn-success" ng-click="demo()">保存</button>
	</div>
	<div  ng-show ="z.show">
	<label >AAA</label>
	</div>
		
	</div>
</body>
<script type="text/javascript">
	var myApp = angular.module('showApp', []);
	myApp.controller('demo', function($scope) {
		$scope.toggle = {show: true};
		$scope.z = {show: false};
		$scope.demo=function(){
			//$scope.zshuai.ng-show = false;
			$scope.toggle.show = !$scope.toggle.show;
			$scope.z.show = true;
		} 
		
	})
</script>
</html>
Strugglezs
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJS改变元素显示状态
12-29
前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态。 控制html元素显示和隐藏有n种方法：html的hidden、css的display、jQuery的hide()和show()、bootstrap的.hide。今天的重点不是显示和隐藏，而是监听某个布尔变量值，自动改变元素显示和隐藏状态。监听函数、if判断、选择dom、设置dom，5行代码搞不定吧，而且毫无技术含量。 实例1 <body> <div ng-controller=VisibleController> <p ng-show=visible>字符串1<
html、angular样式隐藏或显示div的几种方式
Larry的博客
06-17 1294
隐藏div
AngularJS：div显示或隐藏
qq_37809783的博客
08-15 5601
使用ng-show在div中显示或隐藏div操作： eg: &lt;div ng-show= "show"&gt; &lt;span&gt;显示按钮&lt;/span&gt; &lt;/div&gt; 1.点击显示按钮 &lt;div ng-click = "show = true"&gt; &lt;button&gt; click show &lt;
AngularJS控制div隐藏或显示-ng-show
weixin_34167819的博客
07-26 2324
2019独角兽企业重金招聘Python工程师标准>>> ...
angularjs 点击div外面,隐藏该div
你好邱林和的专栏
12-12 5423
一般界面上都会有工具,点击就会弹出一下界面显示对应的选项,现在想实现,弹出的界面,点击外面的区域,隐藏掉该界面,主要采用ng-show属性和事件冒泡阻止的知识,如下过程:       1.界面上的布局文件:         工具 导出编号姓名 导出就诊申请单 师职医疗证
angular2显示与隐藏 *ngIf [hidden]
小武的博客
04-02 2267
1. *ngIf是直接删掉相关的div echartVisable=true <div *ngIf="echartVisable">显示</div> <div *ngIf="!echartVisable">删除</div> 2. [hidden]只是隐藏，div还在 echartVisable=true <div [hidden]="!echartVisable">显示</div> <div...
AngularJS实现DOM元素的显示与隐藏功能
10-21
总的来说，AngularJS的`ng-hide`和`ng-show`指令为前端开发者提供了强大的工具，它们简化了DOM元素显示隐藏的处理，使得开发者能够更加专注于业务逻辑而不是底层的DOM操作。通过深入理解这些指令，开发者可以更好地...
AngularJS中实现显示或隐藏动画效果的方式总结
11-24
在AngularJS中，实现显示或隐藏的动画效果是通过结合其内置的`ngAnimate`模块与CSS或JavaScript动画库来完成的。以下是对这个过程的详细说明： 首先，要使用AngularJS的动画功能，需要安装并引入`ngAnimate`模块。...
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
10-17
在本例中，我们将探讨如何使用AngularJS的`ng-show`指令与复选框（`checkbox`）配合，根据复选框的状态来控制内容的显示和隐藏。 首先，我们需要了解AngularJS中的`ng-model`指令。`ng-model`用于双向数据绑定，它...
angularjs-bubbles：使用AngularJS框架的动画气泡
03-02
3. **JavaScript控制**：在AngularJS控制器中，我们可以通过改变`isShown`变量来控制气泡的显示和隐藏，从而触发动画。 ```javascript $scope.isShown = false; $scope.showBubble = function() { $scope.isShown...
angular 内容的显示和隐藏： component.ts变量控制＜span＞内容显示隐藏 ng-show/ng-hide/ng-if/ng-switch,hidden
weixin_41147129的博客
10-20 3999
显示和隐藏元素是, Angular是通过修改数据模型DOM的方式来驱动UI刷新，然后通过指令把变更反应到UI上。 ngIf,ngFor… 在angular里被称为是结构型指令.所谓结构型指令,就是它能够塑造或重塑DOM的结构. 说句话就是在渲染的时候它能够帮你增加,删除,维护这些元素. ng-show/ng-hide: ng-show是满足条件就展示,ng-hide是满足条件就隐藏. 因为 它们用法差不多,所以下面就单纯讲ng-show. ng-show接收的是一个boolean值,当为值true的时候就去
angular的几种元素隐藏的方式
sdfujichao的博客
07-19 1万+
ng-show和ng-if 等几个隐藏显示元素的方法。 .box{ width: 100px; height: 100px; background: red; } <!--定义一个开关，只有当父div中子元素的相应变量值等于c
angularjs实现点击图标显示div，点击div以外的区域隐藏div
chongchong1325的博客
08-31 2403
代码如下： $(document).on('click',function(e){ var target = e.target|| e.srcElement; var select = document.getElementById('select_enquiry')//点击的图标 var element = docume
angular--显示与隐藏
maoobo的专栏
11-20 4641
demo   function TestDisply($scope){     $scope.DivState.show=false; $scope.toggleMenu=function(){           $scope.DivState.show!= $scope.DivState.show; }     } demo
AngularJs实现显示与隐藏
拉莫帅的博客
01-18 1万+
设置点击按钮，进行显示表格 button ng-click="isshow=true">新增的产品button> 设置显示与隐藏的控件 table ng-show="isshow" style="margin-left: 120px;"> tr> td> 产品编号：input type="
angularjs学习笔记之二（DOM 元素的显示与隐藏）
不忘初心，才能始终
03-30 3671
DOM元素的显示与隐藏 ，是前端开发中常常会用到的功能，angularjs中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性即可实现所有功能他们的取值为 boolean。 【HTML代码】 angularjs 显示隐藏元素 我出现了 显示/隐藏 angular.module(
angularjs html 圆点,AngularJS实现元素显示和隐藏的几个案例
weixin_33670167的博客
05-31 178
案例一：控制html元素显示和隐藏有n种方法：html的hidden、css的display、jquery的hide()和show()、bootstrap的.hide。今天的重点不是显示和隐藏，而是监听某个布尔变量值，自动改变元素显示和隐藏状态。监听函数、if判断、选择dom、设置dom，5行代码搞不定吧，而且毫无技术含量。看代码：ng-show and ng-hide directives字符串...
AngularJS进阶(七)实现根据不同条件显示不同控件
热门推荐
IT全栈 华强工作室
11-20 5万+
AngularJS实现根据不同条件显示不同控件 由于项目需求，需要实现根据不同条件显示不同控件的功能。具体要求如下图所示: 即当选择“每单固定减”时，下方只显示“减免金额”一栏； 当选择“每单固定折扣”时，下方只显示“折扣比例”一栏； 当选择“每单满额减”时，下方只显示“满..减..”两栏。 根据自己对angular的了解，应该可以很轻松的实现此功能。 js设置控件
通过select下拉框里的value控制div显示与隐藏
祈澈菇凉
03-27 6345
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/2.0.0/jque
jq 控制div显示隐藏
最新发布
06-11
可以使用 jQuery 的 toggle() 方法来实现 div 的显示和隐藏。toggle() 方法可以在显示和隐藏之间进行切换。 例如，你可以在 HTML 中创建一个按钮和一个 div 元素： ``` 点击切换 <div id="myDiv">这是要显示和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值