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

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 变量的时候 出现了一大堆错误,难道不允许这样设置变量?

有知道的大神可以评论一下,谢谢)

时间: 2024-08-01 06:25:13

angularjs学习笔记之二(DOM 元素的显示与隐藏)的相关文章

AngularJS 学习笔记(二)

AngularJS中有ng-controller,通过这样可以给DOM元素装上控制器. 比如这样: <div ng-controller="firstController">     <p ng-bind="i"></p>     <input type="text" ng-model="abc" value="">     <p ng-bind=&qu

angularJS学习笔记(二)

前言 首先,了解 一下ng的一些概念: module 代码的组织单元,其它东西都是定义在具体的模块中的. app 应用业务,需要多个模块的配合完成. service 仅在数据层面实现特定业务功能的代码封装 controller 与DOM结构相关联的东西,即是一种业务封装概念,又体现了项目组织的层级结构 filter 改变数据的一种机制 directive 与DOM结构相关联,特定功能的封装形式 上面的这些概念基本上就是ng的全部.每一部分都可以自由定义,使用时通过各种要素的相互配合来实现我们的业

AngularJS学习笔记(二)MVVM

什么是MVVM MVVM模式是Model-View-ViewMode模式的简称. 由视图(View).视图模型(ViewModel).模型(Model)三部分组成,通过这三部分实现UI逻辑.呈现逻辑和状态控制.数据与业务逻辑的分离. 各层的职责 Model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法.它具有对数据直接访问的权利,例如对数据库的访问,Model不依赖于ViewModel,也就是说,Model不关心会被如何显示或是如何被操作,也不包含任何用户使用的与界面相关的逻辑. V

AngularJs学习笔记(二)----------关于过滤器

<!DOCTYPE html5> <html> <head> <title>AngularJs的练习</title> <meta charset="UTF-8"/> </head> <body ng-app="myModule1"> <h1>AngularJs中过滤器的使用---在HTML模板中使用</h1> <h3>number过滤器

jquery学习笔记-jQuery操纵DOM元素属性 attr()和removeAtrr()方法

jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值. 看例子: <!DOCTYPE html> <html>

JQuery采用CSS实现DOM元素的显示和隐藏

今天参加了一个Code Review活动,看了一个同事的写的代码,感觉满足了当前的功能实现,但是从长远来看,无论从代码复用角度还是维护上看都显得非常差.先看看需求是什么吧.需求是通过下拉框的选择不同的选项,来显示和隐藏一个文本框.同事是这样写的: Code 1 <select name="select" onChange="disinput(this)"> <option value="1">1</option>

angularjs 学习笔记(二) ----- bootstrap框架

1.  下载新的jquery-1.11.1文件. 2.  下载新的bootstrap文件. 3.  选择流式布局的模板填充入index.html文件. 4.  将top.foot转为nginclude文件 nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中. $rootScope.global =global; 直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开. 5

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc

angularjs 学习笔记 -----结构定义

1.  Module使用方法 var APP =angular.module('fontApp',['ngResource', 'ngRoute', 'ngSanitize']); APP为定义的别名,之后的调用都应尽量使用该别名 'fontApp' ng-app="fontApp" 新版本angular中route被分离出来,各个被使用的Providerdou需要在此处声明. 大型应用应该拆分模块来做,先定义一个服务模块,然后再加载它 angular.module('xmpl.ser