ng-if
ng-if指令基于{表达式}来移除或重建DOM树的一部分。如果赋给 ng-if的表达式计算结果为假，元素会从DOM移除，其它情况会复制一份元素插入到DOM中。
ngIf 不同于 ngShow 和 ngHide ， ngIf 是在DOM中完全移除或重建元素，而不是通过 display css 属性改变可见。一种常见的情况是，这种差异表现在依靠一个元素在DOM的位置使用CSS选择器时，例如 :first-child 或 :last-child 伪类。
<body ng-controller="MainCtrl as ctrl">
<!-- 点击事件调用changePage方法并赋值，
点击page1时赋值为true，点击page1时赋值为false -->
<input type="button" ng-click="ctrl.changePage(true);" value="page1">
<input type="button" ng-click="ctrl.changePage(false);" value="page2">
<!-- 当flag值为true是显示page1，值为false时显示page2 -->
<h2 ng-if="ctrl.flag">page1</h2>
<h2 ng-if="!ctrl.flag">page2</h2>
<script type="text/javascript">
angular.module("myApp",[])
.controller("MainCtrl",[function(){
var self = this;
// 初始显示第一个页面
self.flag = true;
self.changePage = function (flag) {
self.flag = flag;
}
}])
</script>
</body>
效果展示
GIF.gif
ng-switch
ngSwitch指令用于根据域表达式在你的模板上按条件切换DOM结构。元素内使用ngSwitch而非ngSwitchWhen或ngSwitchDefault指令的地方会保留在模板中的位置。
Paste_Image.png
<body ng-controller="MyCtrl as ctrl">
<!-- 通过changePage()这个函数的传参，来给pageName变量赋值 -->
<input type="button" ng-click="ctrl.changePage('page1')" value="page1">
<input type="button" ng-click="ctrl.changePage('page2')" value="page2">
<input type="button" ng-click="ctrl.changePage('page3')" value="page3">
<!-- ng-switch on表示要执行分支的条件变量 -->
<div ng-switch on="ctrl.pageName">
<!-- 通过匹配pageName的值来显示哪个页面
如果pageName的值为page1，则显示页面1 -->
<h2 ng-switch-when="page1">页面1</h2>
<h2 ng-switch-when="page2">页面2</h2>
<h2 ng-switch-when="page3">页面3</h2>
<h2 ng-switch-default>其它页面</h2>
</div>
<script type="text/javascript">
angular.module("myApp",[])
.controller("MyCtrl",[function(){
var self = this;
// 默认页面为page1
self.pageName = "page1";
self.changePage = function (pageName) {
self.pageName = pageName;
}
}])
</script>
</body>
效果展示
GIF.gif
ng-repeat
ngRepeat指令为集合中的每项实例化一个模板。每个模板的实例拥有自己的域，使用循环变量指向当前集合项上，$index指向当前项的索引或键值。
Paste_Image.png
- 遍历字符串<code>char in ctrl.str</code>
<li ng-repeat="a in 'hello' track by $index">{{ a }}</li> - 遍历普通数组<code>item in ctrl.arr</code>
<li ng-repeat="item in ctrl.names">{{ item }}</li> - 遍历对象<code>value in ctrl.obj或者(key,value) in ctrl.obj</code>
<li ng-repeat="item in ctrl.person">{{ item }}</li>
<li ng-repeat="(key,value) in ctrl.person"
ng-bind-template='{{ key + "=>" + value}}'></li>
注意： track by $index解决遍历重复元素报错问题
指定重复的开始和结束点
ng-repeat-start 和ng-repeat-end
为了解决重复元素序列只有一个父元素的情况，ngRepeat (不同于其它ng指令)支持扩展重复范围，通过使用ng-repeat-start 和 ng-repeat-end分别定义明确的开始和结束点。ng-repeat-start 指令工作方法类似ng-repeat，但是会重复从标签定义本身位置开始到ng-repeat-end定义位置之间的所有HTML代码。
<tr ng-repeat-start="move in ctrl.movies ">
<td > {{ move.title }} </td>
</tr>
<tr ng-repeat-end>
<td>{{ move.name }}</td>
</tr>
数据结构
self.movies = [
{ title : 'NO.1', name : '西游记' },
{ title : 'NO.2', name : '瑜伽功夫' },
{ title : 'NO.3', name : '乘风破浪' }
]
效果展示
Paste_Image.png
网友评论