ng指令常用介绍http://www.cnblogs.com/lvdabao/p/3379659.html
1.ng-show,ng-hide
jquery需要操作DOM，而angularjs不需要操作，它绑定了需要显示的内容，自动修改display属性的值来做显示。
对于比较常用的元素显隐控制，ng也做了封装，ng-show和ng-hide的值为boolean类型的表达式，当值为true时，对应的show或hide生效。框架会用display:block和display:none来控制元素的显隐。
index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
</head>
<body>
<!--测试ng-show ng-hide -->
<div ng-controller="mytoggle">
<!--点击切换的超链接 -->
<a href="javascript:void(0)" ng-click="toggle()">切换</a>
<div ng-show="showImg">
<img style="width: 50px" src="/angularjstest/img/2.jpg" />
</div>
</div>
<script src="../js/angular.js"></script>
<script src="app.js"></script>
</body>
</html>app.js
var myapp = angular.module('myapp',[]);
myapp.controller('mytoggle',function($scope){
$scope.showImg = false;
$scope.toggle = function(){
$scope.showImg = !$scope.showImg;
}
});
这里angularjs绑定了showImg的值，在toggle函数中修改该属性的值，即可切换 显示和隐藏。
2.ng-if
条件为boolean类型表达式，用法和ng-hide相同，当返回true，则插入html，否则不显示(没有标签)，如下代码，可以在运行的时候浏览器查看源代码就可以懂得
<span style="font-size:14px;"><html>
<head>
<title>AngularJS</title>
<script src="../js/angular.js"></script>
</head>
<body>
<div ng-app="">
Find out <input type="checkbox" ng-model="checked" ng-init="checked=true"/>
<span ng-if="checked">
You found something here!
</span>
</div>
</body>
</html></span>
扫一扫
1128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
