1. ng-show 的主要用法就是表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素，为了验证它的功能，我们写一个小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
hello: <input type="checkbox" ng-model="test1">
<div ng-show="test1">
test1
</div>
<div ng-show="test2">
test2
</div>
</body>
</html>http://jsfiddle.net/pxzodqdw/ 在这里可以看到复选框有没有选中会影响 test1 有没有显示，而对 test2 没有影响，通过对比可以验证 ng-show 的用法。
2.ng-hide 表达式为 true 时隐藏 HTML 元素，举例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
隐藏 HTML: <input type="checkbox" ng-model="test">
<div ng-hide="test">
hello world
</div>
</body>
</html>http://jsfiddle.net/wyhq13ya/ 可以看到选中复选框，test 内容消失。
3.ng-if 表达式返回 false 则会移除整个元素，如果为 true，则会添加元素。与前两个有本质的不一样，ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素，举例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
保留 HTML: <input type="checkbox" ng-model="test" ng-init="test = true">
<div ng-if="test">
hello test
</div>
</body>
</html>http://jsfiddle.net/522thcpv/ 看着是和前面两个效果差不多，但是实际写代码时，性能不优于前面两个的，在前端性能优化中有一条就是——减少对 DOM 的操作。
4561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
