testShowAndHiddern.html

<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<meta charset="UTF-8" />
<title>动画效果之：隐藏与显示</title>
<!--引入官方标准的angular.min.js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src=" js/dynamic/testShowAndHidden.js"></script>
</head>
<body >
<div ng-controller="TextShowAndHiddenController">
<button ng-click="showAhidden()">{{title}}</button >
<ul ng-show="status.show">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>

</html>

/test/WebContent/js/dynamic/testShowAndHidden.js

var myModule=angular.module("MyModule", []);
myModule.controller("TextShowAndHiddenController",['$scope',
function HelloController($scope){
//初始化默认值
$scope.title="动画效果之：隐藏与显示...";
//默认隐藏
$scope.status={
show:false
};

//单击事件后：显示或隐藏
$scope.showAhidden=function(){
$scope.status.show= !$scope.status.show;
}
}
]);

访问路径：http://localhost:8080/test/testShowAndHiddern.html

访问效果：

angularJs:动态效果之：显示与隐藏(该例对比了普通赋值，层次赋值，事件的写法对比)的更多相关文章

  1. AngularJS中实现显示或隐藏动画效果的3种方式

    本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-anima ...

  2. JS 实现显示和隐藏div（以百度地图为例）

    主要参考的文章:https://my.oschina.net/xsh1208/blog/215811,https://zhidao.baidu.com/question/568774688.html ...

  3. xml publisher根据条件显示或隐藏列

     xml publisher根据条件显示或隐藏列 <?if@column:condition? > -- <?end if?> 样例: 依据PROJECT_FLAG标签显示 ...

  4. AngularJS进阶(十)AngularJS改变元素显示状态

    AngularJS改变元素显示状态 前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:ht ...

  5. JS实现点击参数面板按钮显示或隐藏数据

    当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据.如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板 ...

  6. 通过设置标签class值控制标签的显示与隐藏

    需求背景如下: 原项目居民.单位.计量三模块共用一个jsp文件,显示的页面也顺理成章的统一了,幸亏没有调用同一个js,在此基础上要求居民和单位计量的分离,即居民的显示居民的相关信息,单位和计量的显示相 ...

  7. android 软键盘的显示与隐藏问题的研究

    在android中,常常会和输入法的软件键盘交互.在Manifest文件中,系统给activity的一个属性-windowSoftInputMode来控制输入法的显示方式. 该属性提供了Activit ...

  8. JQuery采纳CSS实现DOM显示和隐藏要素

    今天参加了Code Review活动.阅读编写代码的同事,感到满足当前功能的实现,但是从长远来看,,无论角度还是从代码重用是来看显然不佳维修点. 有什么需要看的权利.通过选择不同的选项下拉框需求,为了 ...

  9. jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较

    1.区别 ①动画效果的比较: toggle:直接显示.隐藏,如果有[时间参数]且[匹配的元素有宽度属性],则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化:若有时间参数但是[匹配的元素没有宽 ...

随机推荐

  1. td也可以溢出隐藏显示

    或许我这篇文章一取这样的名字,就会有人要问了:你怎么还在关注table啊,那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了,不知道还有什么好了. table真的过时了么?你真的了解 ...

  2. 怎样将文件夹打包为jar包或war包

    在dos命令中,找到要打包文件夹位置,输入jar -cvf 打包后的名和格式 文件夹名 如图: 在我的文件夹的位置就能看到jar包和war包了

  3. Html - 幽灵键盘

    Css ;text-align:center} #shurufa_gongneng,#shurufa_num_123,#shurufa_num_456,#shurufa_num_789{} #shur ...

  4. IOS第四天(4:下一题和选框的实现)

    #import "HMViewController.h" #import "HMQuestion.h" #define kButtonWidth 35 #def ...

  5. HOWTO：制作 Windows 7 加速部署映像(作者:苏繁)

    加速部署映像 - 也就是我们通常说的系统模板,通常我们为了提高 Windows 的安装速度,会事先制作一套包含驱动.应用软件.补丁程序以及自定义设置的标准化系统.这样我们在使用该加速部署映像完成安装后 ...

  6. 【ArcGis for javascript从零开始】之一 ArcGis加载天地图

    最近做项目需要用到ArcGis来进行数据展示和数据分析.以前从来没有接触过与Gis有关的东西,一切需要从头开始学.没有时间从头系统地学习了,只能用到哪个学习哪里了,本系列只是对学习的路径进行记录.Ar ...

  7. HTTP 笔记与总结（2 ）HTTP 协议的（请求行的）请求方法 及 （响应行的）状态码

    (请求行的)请求方法 包括: GET,POST,HEAD,PUT,TRACE,DELETE,OPTIONS 注意:这些请求方法虽然是 HTTP 协议规定的,但是 Web Server 未必允许或支持这 ...

  8. Vi问题

    ,ubuntu11.10下vi编辑器按i,左下方没有出现“输入模式”或者“insert”.在桌面环境下,用ctrl+alt+t调出命令行打开是这样,在第一控制台ctrl+alt+F1下打开,也是这样, ...

  9. DirectX 基础学习系列6 字体

    DIRECTX9自带ID3DXFONT类 内部调用GDI的接口,效率一般,但能够处理一些复杂的字体 HRESULT D3DXCreateFontIndirect( LPDIRECT3DDEVICE9 ...

  10. 20145317彭垚 《Java程序设计》第10周学习总结

    20145317彭垚 <Java程序设计>第10周学习总结 教材学习内容总结 网络编程 网络编程对于很多的初学者来说,都是很向往的一种编程技能,但是很多的初学者却因为很长一段时间无法进入网 ...