AngularJS （ng）诞生于2009年
由Misko Hevery 等人创建
后为Google所收购
（PS：下载angular项目所用到的所有js路径：）
AngularJS（ng）是一个纯JS框架，AngularJS易于构建CRUD应用(CRUD意思是增删改查)
适用于以数据操作为主的SPA（Single Page Application）应用。
基于jQuery对传统的DOM操作进行进一步的封装—使用MVC操作代替了所有的DOM操作。
不再是“先查找元素再操作元素”，
所有的操作都是以“业务数据“为中心
搭建环境：
使用 AngularJS 的步骤：
1.引入必需的js文件 : angular.js
2.为父元素声明ngApp属性(这里的父元素一般指html)(系统会自动载入或启动一个NG应用，这个ngApp是唯一的，只能有一个)
3.为父元素内部使用angularJS相关内容
ng四大特性：
1.采用MVC模式，页面中再也无需出现DOM操作。
2.双向数据绑定。
3.依赖注入
4.模块化设计
ng四大特性之一MVC模式：
(1)Model: 模型，指业务数据，web项目中由js变量担当model。
(2)View: 视图，用户界面，HTML
(3)Controller: 控制器，Function
AngularJS 中ng模块提供的指令(directive)
(1) ngApp：自动载入/启动一个AngularJS应用
(2) ngInit：用于声明Model（模型）变量
(3) ngController：创建一个控制器对象的实例
(4) ngBind：在当前元素的innerHTML上输入指定的表达式的值
(5) ngRepeat：为HTML增加循环功能，循环输出当前元素
(6) ngIf：为HTML增加选择功能，只有在表达式值为true时，当前元素才添加到DOM树
(7) ngSrc：解决img等标签的src属性中包含{{}}产生的问题
(8) ngClick: 为元素绑定监听函数(不是全局函数，而是Model函数)
(9) 使用scope.模型函数名=function()格式来声明模型函数(10)ngStyle:赋值为一个Model对象，用于为当前元素指定样式(11)ngShow/ngHide:通过display：none/block来控制当前元素是否显示(12)ngDisabled:赋值为true/false，可以控制当前元素是否禁用(13)ngChecked:赋值为true/false，可以控制当前元素是否选中Angular中声明变量——Model数据有两种方式可以声明Model变量：(1)使用ngInit指令声明ngInit指令可以声明为HTML元素的属性或样式ngInit指令声明的Model变量可以先使用再声明ngInit指令可以一次声明多个Model变量，用分号隔开即可ngInit指令可以声明哪些类型的Model变量：number、string、boolean、对象、数组、对象的数组注意：使用ngInit定义Model变量时不能使用new关键字；此方法把View和Model混杂在一起，不推荐使用！(2)使用Controller创建Model变量——推荐使用创建Module&=创建Controller&=创建Model变量注意：新版本的Angular要求控制器必须声明在一个模块中！具体步骤：1)声明一个自定义的模块(module)angular.module(‘模块名′,[])2)在当前AngularJS应用中注册自定义模块ng-app=”模块名”3)在自定义模块中创建Controller函数，其中创建Model数据scope.模型变量名 = 值
4)在View中创建Controller对象的实例，指定其作用范围
&标签 ng-controller=“控制器名”&…控制器的有效范围…
angular.module("haixin",[]).controller("方法名",function(scope){scope.mobile1="";
$scope.mobile2="";
定义对象属性：
function studentController(scope){scope.student={
stu1:"zhangsan",
stu2:"lisi"
定义方法：
function studentController(scope){scope.student={
sName1:"zhangsan",
sName2:"lisi",
allName:function(){
return n.sName1+""+n.sName2;
PS：小练习：
(1)创建一个新的页面，其中声明module、controller、model变量：一个学生对象，其中包含sname、gender、birthday、score等属性，在view中显示这些model数据
(2)创建一个新的页面，其中声明module、controller、model变量：5个分数组成的数组，在view中的一个列表中输出这5个数字
(3)五个商品的数据显示在View中的table元素中，使用ngRepeat指令进行循环
案例答案：
{{k}}:{{v}}
序号商品名字
商品价格商品图片
{{$index+1}}
{{i.name}}
{{i.price}}
angular.module("haixin",[]).controller("practice",function(scope)$scope.obj=newObject();$scope.obj.name="Tom";$scope.obj.gender="boy";$scope.obj.birthday="4.18";$scope.arr=[10,20,30];).controller("commodity",function(scope) {
scope.arr1=[name:"商品1",price:"77",img:"images/1.jpg",name:"商品2",price:"33",img:"images/2.jpg",name:"商品3",price:"55",img:"images/3.jpg"];scope.add=function () {
for(var i=0;i&3;i++){
var arr2 ={};
arr2.name="商品";
arr2.price="11";
arr2.img="images/"+(1+i)+".jpg";
scope.arr1.push(arr2);&&&&&&&&&&&&&&}&&&&&&&&&&}&&&&&&})&&&&&&&&1&&2&&3&&4&&5&&6&&7&&8&&9&&10&&11&&12&&13&&14&&15&&16&&17&&18&&19&&20&&21&&22&&23&&24&&25&&26&&27&&28&&29&&30&&31&&32&&33&&34&&35&&36&&37&&38&&39&&40&&41&&42&&43&&44&&45&&46&&47&&48&&1&&2&&3&&4&&5&&6&&7&&8&&9&&10&&11&&12&&13&&14&&15&&16&&17&&18&&19&&20&&21&&22&&23&&24&&25&&26&&27&&28&&29&&30&&31&&32&&33&&34&&35&&36&&37&&38&&39&&40&&41&&42&&43&&44&&45&&46&&47&&48&&ng四大特性–双向数据绑定:&&&方向一：把Model数据绑定到View上&&&把Model数据绑定到View上后，任何Model数据的修改，都会自动更新到View上（{{&}}、ngBind、ngRepeat、ngSrc…都实现了方向1的绑定）&&&方向二：把View绑定到Model上&&&把View数据绑定到Model后，任何View数据的修改，都会自动更新到Model上&&&此后不论任何时候，只要View中的数据一修改，Model中的数据会自动随之修改。实现方法：&只有ngModel指令。&&&可以使用scope.watch(‘模型变量名’,&fn)监视一个模型变量值的改变；单行文本输入域、多行文本输入域、下拉框、单选按钮控件默认会把自己的value属性值绑定到一个Model变量；复选框会把一个true/false值绑定到一个Model变量。&&&ng模块中提供的服务(service)&&&(1)rootScope:用于在不同的控制器间共享数据(2)interval:&提供周期性定时器服务&&&(3)interval.cancel(t)：清除定时器(4)timeout:&提供一次性定时器服务&&&(5)http: 发起异步的Ajax请求服务
定时器小案例：input值改变的时候，控制台也会改变，若只写input和P的时候，input值改变的时候P的内容也跟着改变。
代码如下：
scope.watch("Uname",function () {
console.log($scope.Uname);
PS：小练习
1：简易版的点击次数计算器
2：简易版的轮播广告
3：用Bootstrap组件制作一个进度条（每隔0.2s，前进10%）取消定时：$interval.cancel(t);
4：简易版的购物车
5：同意使用条款，则可以注册，否则禁止注册
6：简易版模拟QQ选择切换头像
7：全选或取消全选（PS：4,5,6,7这四个小练习是双向数据绑定了，直接加ng指令就可实现。下面案例中图片名字一律为n.jpg【n 为正整数】）
案例代码如下：
&img ng-src="images/{{img}}.jpg" alt="" width="300"&
&button class="btn btn-success" ng-click="prev()"&上一个&/button&
&button class="btn btn-success" ng-click="next()"&下一个&/button&
&/section&
&section class="progress" ng-controller="jindutiao"&
&div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"
ng-style="myStyle"&&/div&
&/section&
&section ng-controller="a2"&
单价：&input type="number" placeholder="请输入价钱" ng-model="price"&
数量：&input type="number" placeholder="请输入数量" ng-model="num"&
小计：&span&{{price*num}}&/span&
&input type="checkbox" ng-model="agree"&我同意本站的使用条款
&button class="btn btn-success" ng-disabled="!agree"&提交注册&/button&
&button class="btn btn-danger" ng-if="agree"&提交注册&/button&
&button class="btn btn-primary" ng-show="agree"&提交注册&/button&
&select ng-model="pic"&
&option value="images/1.jpg"&帅锅&/option&
&option value="images/2.jpg"&蕾女&/option&
&option value="images/3.jpg"&大爷&/option&
&option value="images/4.jpg"&大叔&/option&
&span&&img ng-src={{pic}} width="200"&&/span&
&input type="checkbox" ng-checked="checkAll"&A
&input type="checkbox" ng-checked="checkAll"&B
&input type="checkbox" ng-checked="checkAll"&C
&input type="checkbox" ng-model="checkAll"&
&span ng-hide="checkAll"&全选&/span&
&span ng-show="checkAll"&取消全选&/span&
&/section&
angular.module("haixin",[]).controller("lunbo",function (scope)&{scope.n = 10;
scope.fn=function()$scope.n++;;scope.img =1;
scope.next=function()$scope.img++;if($scope.img==5)$scope.img=1;;scope.prev=function () {
scope.img--;if(scope.img
/start =》 tpl/start.html
/main =》 tpl/main.html
获取当前URL中路由地址所对应的真实模板页面的地址
(4)客户端发起异步AJAX请求，获取目标模板页面，将服务器返回HTML片段(只含有几个div)，插入到当前的DOM树上。
使用ngRoute模块的步骤：
(1)创建唯一完整的页面: index.html，引入angular.js和angular-route.js
(2)在index.html的body中使用ngView指令声明一个容器元素，用于盛放模板页面
(3)创建自定义模块，声明依赖于ng和ngRoute两个模块
(4)在当前模块中使用ngRoute提供的对象配置路由字典
angular.module(“haixin”,[]).config(function(routeProvider){routeProvider.when(“/路由地址”, {
templateUrl:”模板页面URL”
}).otherwise({
redirectTo:”/路由地址”
(5)再创建几个模板页面，只需要有div元素即可
(6)测试路由字典的配置是否正确
使用ngRoute模块需要注意的问题：
(1)由于模板页面被客户端请求后挂载在index.htmlDOM树上，所以其中所有的图片等外部资源文件的路径必须相对于index.html，而不是模板页面。
(2)使用ngRoute模块时，无需为模板页面中的某个元素单独设置ngController，只需要在声明路由字典时设置整个模板页面所需要的控制器即可
.when(‘/路由地址’, {
templateUrl: ‘xxx.html’,
controller: ‘控制器名’
(3)在不同的模板页面间跳转可以采用两种方式：·超链接方式：
scope.jump&=&function(){location.path(‘/路由地址’);
(4) index.html中，由于所有模板页面都是在ngView中切换，ngView外面的内容会始终呈现。
官方提供的模块——ngAnimate
ngAnimate可以支持JS、Transition、Keyframes动画，但它本身未提供任何的动画效果，而是为上面三种技术提供了相应的“动画钩子(Hooks)”
ng模块中提供的指令：ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 和 ngClass默认都提供了动画钩子。
使用ngAnimate模块调用其CSS Transition动画钩子的步骤：
(1) index.html引入angular.js和angular-animate.js。
(2) 自定义模块中声明依赖于ngAnimate模块——特定的指令就会产生动画钩子。
(3) 为ngView声明class，样式中指定transition动画；
可以看到ngAnimate为即将要离开的ngView添加了 ng-leave和ng-leave-active 两个class，为即将要进入的ngView添加了 ng-enter和
ng-enter-active两个class。为这四个class编写特定的样式即可。
(PS:这里只是普通的进出动画，其实可以更炫点，每个页面都有
进出的动画，这个就是后期要研究的，可以充分利用C3一些特效)
transition: all 2
width: 100%;
/要离开的ngView元素动画开始时的样式/
.page.ng-leave {
/要离开的ngView元素动画结束时的样式/
.page.ng-leave.ng-leave-active {
left: -100%;
/要进入的ngView元素动画开始时的样式/
.page.ng-enter {
left: 100%;
top: 100%;
transform: scale(0.9);
/要进入的ngView元素动画结束时的样式/
.page.ng-enter.ng-enter-active {
ng 表达式:
ng 表达式写在双大括号内：{{ expression }}。
ng 表达式把数据绑定到 HTML，这与ng-bind指令有异曲同工之妙。
ng 将在表达式书写的位置”输出”数据。
ng 表达式很像JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 ：{{ 5 + 5 }} 或 {{ firstName + ” ” + lastName }}
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：3226次
排名：千里之外
转载：17篇使用ngView配合AngularJS应用实现动画效果的方法
我的图书馆
使用ngView配合AngularJS应用实现动画效果的方法
AngularJS 提供了一个很棒的方式来创建单页app。正是由于这个原因，使得我们的站点看起来更像是一个原生的手机程序。为了使它看起来更像是原生的程序，我们可以使用 ngAnimate module 为它添加过渡和动画效果。这个模块可以使我们创建漂亮的程序。今天，我们将要看一下如何为 ng-view 添加动画效果。我们要构建什么我们假设我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接会将一个试图滑出，同时将另一个试图滑入。我们将会使用：&&& 使用 ngRoute 来为我们的页面路由&&& 使用 ngAnimate 来为页面创建动画效果&&& 对页面使用 CSS Animations&&& 当我们离开或进入试图时，我们的每一个页面会有不同的动画效果Extreme Animations: 我们在这里使用的动画效果就是上面提到的这些。精巧的动画效果可以为你的站点增色不少，仅仅是demo页面就足够令我们为之疯狂了。*动画效果来自于Codrops上的&它如何工作？让我们看一下ngAnimate是如何工作的。ngAnimate 会根据是进入还是离开视图来为不同的Angular 指令(directive)添加和移除不同的CSS类名。例如，当我们加载网站时，无论ng-view中填充了什么都会得到一个.ng-enter的类名。我们所需要做的就是给.ng-enter 类名添加CSS动画效果，该动画在进入的时候会自动生效。ngAnimate 可以应用于: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 以及 ngClass一定要查看&&来了解ngAnimate更多的功能。接下来，让我们在实际应用中了解一下。开始我们的程序以下使我们需要的文件：&- index.html- style.css- app.js- page-home.html- page-about.html- page-contact.html让我们从 index.html 开始，我们将会加载 AngularJS,&以及&。对了，不要忘了使用来定义样式。&12345678910111213141516171819202122232425262728&!-- index.html --&&!DOCTYPE html&&html&&head&&&&&&!-- CSS --&&&&!-- load bootstrap (bootswatch version) --&&&&link rel="stylesheet" href="///bootswatch/3.1.1/readable/bootstrap.min.css"&&&&link rel="stylesheet" href="style.css"&&&&&&&&!-- JS --&&&&!-- load angular, ngRoute, ngAnimate --&&&&script src=""&&/script&&&&script src=""&&/script&&&&script src=""&&/script&&&&script src="app.js"&&/script&&&&/head&&&&!-- apply our angular app --&&body ng-app="animateApp"&&&&&&!-- inject our views using ng-view --&&&&!-- each angular controller applies a different class here --&&&&div class="page {{ pageClass }}" ng-view&&/div&&&&&&&&/body&&/html&以上就是我们非常简单的HTML文件。加载我们需要的资源，定义我们的Angular app，并且为我们注入的视图添加ng-view类名。让我们看一下我们所需要的其他的一些文件：&- index.html- style.css- app.js- page-home.html- page-about.html- page-contact.html我们的 Angular 程序 app.js现在，我们需要将会创建一个带路由的Angular程序，以便我们可以在不刷新页面的情况下修改我们的页面。123456789101112131415161718192021222324252627282930313233343536373839404142434445464748&&var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']);&&animateApp.config(function($routeProvider) {&&&&$routeProvider&&&&&&&&&&.when('/', {&&&&&&templateUrl: 'page-home.html',&&&&&&controller: 'mainController'&&&&})&&&&&&&&&&.when('/about', {&&&&&&templateUrl: 'page-about.html',&&&&&&controller: 'aboutController'&&&&})&&&&&&&&&&.when('/contact', {&&&&&&templateUrl: 'page-contact.html',&&&&&&controller: 'contactController'&&&&});&&});&&&&animateApp.controller('mainController', function($scope) {&&$scope.pageClass = 'page-home';});&&animateApp.controller('aboutController', function($scope) {&&$scope.pageClass = 'page-about';});&&animateApp.controller('contactController', function($scope) {&&$scope.pageClass = 'page-contact';});现在，我们创建了我们的程序、路由以及控制器。每一个控制器都有一个它自己的pageClass变量。改变了的值会被添加到index.html文件中的ng-view中，这样我们的每一个页面都有了不同的类名。通过这些不同的类名，我们可以为不同的页面添加不同的动画效果。视图 page-home.html, page-about.html, page-contact.html这些应该尽量保持清晰并且直接明了。我们只需要为每个页面准备一些文字以及链到其他页面的链接地址。&1234567891011121314151617181920&!-- page-home.html --&&h1&Angular Animations Shenanigans&/h1&&h2&Home&/h2&&&&a href="#about" class="btn btn-success btn-lg"&About&/a&&a href="#contact" class="btn btn-danger btn-lg"&Contact&/a&&&&!-- page-about.html --&&h1&Animating Pages Is Fun&/h1&&h2&About&/h2&&&&a href="#" class="btn btn-primary btn-lg"&Home&/a&&a href="#contact" class="btn btn-danger btn-lg"&Contact&/a&&&&!-- page-contact.html --&&h1&Tons of Animations&/h1& &h2&Contact&/h2&&&&a href="#" class="btn btn-primary btn-lg"&Home&/a&&a href="#about" class="btn btn-success btn-lg"&About&/a&现在，我们拥有了我们的页面，通过使用Angular的路由功能可以将这些页面注入到我们的主index.html文件中。现在，所有的乏味的工作已经完成。我们的程序应该可以正常工作，并且可以很好的修改页面。接下来，让我们进入下一步，为页面添加动画效果！为App添加动画效果 style.css我们将使用CSS来添加所有的动画效果。这种方法很棒，因为我们所要做的事就是添加ngAnimate，并且不用修改我们的代码就可以添加CSS动画效果。ngAnimate为我们的ng-view添加的两个类分别是.ng-enter和.ng-leave。你可以想象一些他们各自的作用。基础样式为了使我们的程序看起来不那么乏味，我们将会添加一些基础的样式。&12345678910111213141516171819.page&&& {&&bottom:0; &&padding-top:200&&position: &&text-align:&&top:0; &&width:100%; }&&.page h1&& { font-size:60 }.page a&& { margin-top:50 }&&.page-home&&&& { background:#00D0BC; color:#00907c; }.page-about&& { background:#E59400; color:#a55400; }.page-contact&& { background:#ffa6 color:#9e0000; }通过以上的代码，我们为3个页面添加了基础的样式。当我们点击程序的时候，我们可以看到它们应用了不同的颜色和间距。&CSS 动画让我们定义我们的动画效果，之后我们将会了解一下当页面进入或离开的时候我们怎么才能为不同的页面应用不用的动画效果。Vendor Prefixes: 我们将会使用默认的CSS属性，不带任何前缀的。会包含所有的前缀。我们定义了6个不同的动画效果。每一个页面都会有他们各自的ng-enter 和 ng-leave 的动画效果。&12345678910111213141516171819202122232425262728293031323334353637383940414243...&&&&@keyframes rotateFall {&&0%&&&& { transform: rotateZ(0deg); }&&20%&& { transform: rotateZ(10deg); animation-timing-function: ease- }&&40%&& { transform: rotateZ(17deg); }&&60%&& { transform: rotateZ(16deg); }&&100%&& { transform: translateY(100%) rotateZ(17deg); }}&&@keyframes slideOutLeft {&&to&&&& { transform: translateX(-100%); }}&&@keyframes rotateOutNewspaper {&&to&&&& { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }}&&@keyframes scaleUp {&&from&& { opacity: 0.3; -webkit-transform: scale(0.8); }}&&@keyframes slideInRight {&&from&& { transform:translateX(100%); }&&to&&&& { transform: translateX(0); }}&&@keyframes slideInUp {&&from&& { transform:translateY(100%); }&&to&&&& { transform: translateY(0); }}结合以上我们所定义的动画效果，我们将会把它们应用到我们的页面上。进入和离开动画效果我们只需要将这些动画效果应用给.ng-enter 或 .ng-leave就可以为我们的页面添加不用的动画效果。&1234567...&&&&.ng-enter&&&&&& { animation: scaleUp 0.5s both ease-in; z-index: 8888; }&&.ng-leave&&&&&& { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }&&...现在，我们的程序就会有像上面那样的动画效果了。当离开的时候，页面会向左滑出，当进入的时候会放大。我们还添加了z-index属性，以便离开的页面会处于进入的页面的上层。让我们看一下如何为具体的页面创建动画。&具体页面的动画效果我们为不同的页面创建了各自的Angular 控制器。在这些控制器里面，我们添加了一个pageClass并且将它添加到我们的&div ng-view&中。我们将会使用这些类名来引出具体的页面。不像上面的.ng-enter 和 .ng-leave那样，我们使它们更加具体化。&1234567891011121314151617181920...&&&&.ng-enter&&&& { z-index: 8888; }&&.ng-leave&&&& { z-index: 9999; }&&&&&&&&&&.page-home.ng-enter&&&& { animation: scaleUp 0.5s both ease-in; }&&.page-home.ng-leave&&&& { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; }&&&&&&.page-about.ng-enter&&&& { animation:slideInRight 0.5s both ease-in; }&&.page-about.ng-leave&&& { animation:slideOutLeft 0.5s both ease-in; }&&&&&&.page-contact.ng-leave&& { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; }&&.page-contact.ng-enter&&&& { animation:slideInUp 0.5s both ease-in; }&&...现在，每一个页面都有它各自唯一的进入和离开的动画效果。总结为我们的Angular程序添加动画效果是相当容易的。你所需要做的就是加载ngAnimate并创建你的CSS动画效果。真诚的希望这篇文章可以帮助你了解一些使用ng-view时的一些比较酷的动画效果。
TA的最新馆藏
喜欢该文的人也喜欢AngularJS has directives for binding application data to the attributes of HTML DOM elements.
ng-show Directive
&!DOCTYPE html&
&script src="/ajax/libs/angularjs/1.3.15/angular.min.js"&&/script&
&div ng-app=""&
&p ng-show="true"&Visible.&/p&
&p ng-show="false"&Not visible.&/p&
ng-hide Directive
&!DOCTYPE html&
&script src="/ajax/libs/angularjs/1.3.15/angular.min.js"&&/script&
&div ng-app=""&
&p ng-hide="true"&ng-hide="true" - Not visible.&/p&
&p ng-hide="false"&ng-hide="false" - Visible.&/p&
ng-disabled Directive
The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements:
&!DOCTYPE html&
&script src="/ajax/libs/angularjs/1.3.15/angular.min.js"&&/script&
&div ng-app="" ng-init="myButton=true"&
&button ng-disabled="myButton"&Click Me!&/button&
&br /&&br /&
&input type="checkbox" ng-model="myButton"/&Button
&br /&&br /&
Disabled : {{ myButton }}
The ng-disabled directive binds the application data myButton to the HTML button's disabled attribute. The ng-model directive binds the value of the HTML checkbox element to the value of myButton. If the value of myButton evaluates to true, the button will be disabled.
Please enable JavaScript to view the
Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization
Sponsor Open Source development activities and free contents for everyone.
Thank you.如何使用 AngularJS 的 ngShow 和 ngHide - 技术翻译 - 开源中国社区
如何使用 AngularJS 的 ngShow 和 ngHide
【已翻译100%】
英文原文：
推荐于 3年前 (共 5 段, 翻译完成于 06-23)
参与翻译&(4人)&: ,
今天我们来看看怎样使用Angular的 和 指令来完成它们听起来应该完成的，显示和隐藏！
它们应该做的事
ngShow 和ngHide 允许我们显示或隐藏不同的元素。这有助于创建Angular应用时因为我们的单页程序会有许多的移动部件随着应用状态的改变而来来去去。
这些指令的最伟大的部分就是我们不必使用CSS或者JS来操作显示还是隐藏。这些都是由老练的Angular来完成。
&翻译得不错哦！
想使用ngShow 或ngHide, 只需将指令添加到你想要显示或者隐藏的元素上即可。
&!--&FOR&BOOLEAN&VALUES&===============================&--&
&!--&for&true&values&--&
&div&ng-show="hello"&this&is&a&welcome&message&/div&&&&
&&!--&can&also&show&if&a&value&is&false&--&&
&div&ng-show="!hello"&this&is&a&goodbye&message&/div&&&&
&!--&FOR&EXPRESSIONS&===============================&--&
&!--&show&if&the&appState&variable&is&a&string&of&goodbye&--&
&div&ng-show="appState&==&'goodbye'"&this&is&a&goodbye&message&/div&&
&!--&FOR&FUNCTIONS&===============================&--&
&!--&use&a&function&defined&in&your&controller&to&evaluate&if&true&or&false&--&
&div&ng-hide="checkSomething()"&&/div&
一旦我们设置了我们标记，我们可以多种方式设置hello或者goodbye。你可以将它设置到你的Angular控制器里并且让你的div在应用加载的时候显示或隐藏。
上面的这些都可以用于ng-show或者ng-hide。如果值或表达式或函数返回true，则会隐藏一些东西。
&翻译得不错哦！
用作布尔值
我们将创建使用ng-click的链接，并切换goCats的值为true或false。
&a&href&ng-click="goCats&=&!goCats"&Toggle&Cats&/a&
然后我们可以使用ng-show来显示或隐藏分类图像。
&img&ng-src="/vkW3Lhe.jpg"&ng-show="goCats"&
ng-src 我们使用ng-src来调用图片，这样的话Angular将在实例化及检查图像时确认是否将其隐藏。如果我们不这样的话，图片会在站点加载时弹出来，直到Angular意识到应该将其隐藏。
&翻译得不错哦！
判断表达式
在这里我们来判断一个从输入框传来的字符串，我们把ng-mode绑定在一个输入框的里面并命名为aminal变量，并根据这个变量的内容来显示不同的图片。
下面我们会把我们的变量名焦作aminal。
&input&type="text"&ng-model="aminal"&
然后我们会使用ng-show来对字符串进行判断。
&img&ng-src="/vkW3Lhe.jpg"&ng-show="aminal&==&'cat'"&
我们会做一个简单的检查来判断输入的是奇数还是偶数。 我们会创建一个方法在我们的AngularJS文件中：
//&set&the&default&value&of&our&number
$scope.myNumber&=&0;
//&function&to&evaluate&if&a&number&is&even
$scope.isEven&=&function(value)&{
if&(value&%&2&==&0)
方法创建完成之后, 我们接下来要做的就是通过ng-show或者ng-hide来使用它，并传入我们的数字。通过方法传数字这种方法，可以保持Angular控制整洁和可测试。
&!--&show&if&our&function&evaluates&to&false&--&
&div&ng-show="isEven(myNumber)"&
&&&&&h2&The&number&is&even.&/h2&
&!--&show&if&our&function&evaluates&to&false&--&
&div&ng-show="!isEven(myNumber)"&
&&&&&h2&The&number&is&odd.&/h2&
&翻译得不错哦！
有了这两个方向的指引,我们的应用会有很大的改观. 而这些只是基于&布尔值, 表达式, 以及 函数,实现的元素显示和隐藏功能 但这三种模式将能应用到更多的场景.
希望本文能帮助你构建更好的AngularJS应用.在后续的文章中我们会介绍 ngShow 和 ngHide 以创建更多动态展示的应用.
&翻译得不错哦！
我们的翻译工作遵照 ，如果我们的工作有侵犯到您的权益，请及时联系我们}