angularjs学习笔记之二（DOM 元素的显示与隐藏）

爱被打了一巴掌 2022-08-07 09:49 11阅读 0赞

DOM元素的显示与隐藏 ，是前端开发中常常会用到的功能，angularjs中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性即可实现所有功能他们的取值为 boolean。

【HTML代码】

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>angularjs 显示隐藏元素</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    </head>
    <body ng-app="showHide">
        <div ng-controller="showElements">
            <div ng-show="butshow">我出现了</div>
        	<button ng-click="toggle();">显示/隐藏</button>
        </div>
    </body>
    <script src="./js/angular.min.js"></script>
    <script>
    	angular.module("showHide",[]).controller('showElements', ['$scope', function($scope){
    		 $scope.butshow = true;
    		 $scope.toggle= function(){
    		 	$scope.butshow = !($scope.butshow);
    		 }
    	}])
    </script>
    </html>

（ 但是有个问题：就是当我直接设置 $scope.but.show 变量的时候 出现了一大堆错误，难道不允许这样设置变量？

有知道的大神可以评论一下，谢谢）

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript学习笔记之二（DOM API）

目录 1. 获取元素（querySelector） 2. 事件(onclick) 3. 操作元素 3.1 获取/修改元素内容(innerHTML) 3.2 获取/修改

深碍√TFBOYSˉ_/ 2023年09月27日 10:49/ 0 赞/ 139 阅读

相关 CSS 小结笔记之元素的隐藏与显示

在网站上经常会有一些需要一定操作才会显示或隐藏的元素，这时会用到元素的隐藏与显示。主要通过以下三种属性实现。 1、display ：none|block |inline |i

逃离我推掉我的手/ 2023年06月04日 15:56/ 0 赞/ 19 阅读

相关 css 元素的显示与隐藏 display visibility

网页布局总结 1.标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。 2.浮动可以让多个块级元素一行显示或者左右对齐，多个块级盒子水平

喜欢ヅ旅行/ 2022年12月27日 02:09/ 0 赞/ 300 阅读

相关元素的显示与隐藏——display、visibility、overflow

元素的显示与隐藏让一个元素在页面中隐藏或者显示出来 display显示隐藏 display属性用于设置一个元素如何显示 1. `display: nonoe

今天药忘吃喽~/ 2022年12月19日 03:54/ 0 赞/ 274 阅读

相关 css中元素的显示与隐藏

1.display属性 display:none；【隐藏元素】未加display属性时：代码： <!DOCTYPE html> <html l

ゝ一世哀愁。/ 2022年10月24日 15:23/ 0 赞/ 204 阅读

相关 DOM概述，隐藏显示div

<html> <head> <title>DOM概述</title> <script> / 显示隐藏di

布满荆棘的人生/ 2022年09月19日 12:06/ 0 赞/ 249 阅读

相关 angularjs学习笔记之二（DOM 元素的显示与隐藏）

DOM元素的显示与隐藏，是前端开发中常常会用到的功能，angularjs中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性

爱被打了一巴掌/ 2022年08月07日 09:49/ 0 赞/ 12 阅读

相关 js_元素的隐藏与显示

1. 隐藏显示 display:none visibility:hidden 都是隐藏的意思，但是前者相当于从html中去掉了标签，而后者只是不显示，但是还是占着相应的位

深藏阁楼爱情的钟/ 2022年05月25日 05:44/ 0 赞/ 283 阅读

相关 DOM学习笔记（二）

盒子模型盒子模型属性 > 在JS中通过相关属性可以获取（设置）元素的样式信息，这些属性就是盒子模型属性（基本上都是有关样式的） client cl

曾经终败给现在/ 2022年02月13日 10:47/ 0 赞/ 225 阅读

相关 Bootstrap 页面元素隐藏与显示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

快来打我*/ 2021年07月04日 23:23/ 0 赞/ 698 阅读