今天看到了AngularJs介绍的条件化显示,在AngularJs中拥有四套不同的指令集:ng-show/ng-hide,ng-swatch-*,ng-if,ng-include.
ng-show/ng-hide
ng-show与ng-hide用于隐藏DOM树的一部分,它利用的是CSS规则,类似于CSS中的1
style:"display: none;"
ng-switch
ng-switch会根据条件来移除DOM节点,请注意,这里指的是“移除”,而不是“隐藏”1
2
3
4<div ng-switch on="showSecret">
<div ng-switch-when="true">Secret</div>
<div ng-switch-default>Won't show you my secrets!</div>
</div>
在这个例子中,ng-switch将会监听on里面的值,只要匹配了ng-switch-when就可以将其加入进来,否则将其移除,在一个ng-switch中可以有多个ng-switch-when,ng-switch有一个问题:如果是简单用例,语法也会变得冗长,此时就需要一套新的指令集了:ng-if
ng-if
ng-if语法十分简单,例如:1
<div ng-if="showSecret"></div>
条件化显示的小demo
html:1
2
3
4
5
6
7
8
9
10
11<table class="table table=bordered" ng-controller="ListAndOneDetailCtrl">
<tbody ng-repeat="user in users" ng-click="selectUser(user)" ng-switch on="isSelected(user)">
<tr>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
<tr ng-switch-when="true">
<td colspan="2">{{user.desc}}</td>
</tr>
</tbody>
</table>
js:1
2
3
4
5
6
7
8
9
10
11
12
13angular.module('Myapp',[])
.controller('ListAndOneDetailCtrl',function ($scope) {
$scope.users = [{"name":"pawel","email":"pawel@qq.com","desc":"Pawel details go here"},
{"name":"peter","email":"perter@qq.com","desc":"peter details go here"}];
$scope.selectUser = function (user) {
$scope.selectedUser = user;
}
$scope.isSelected = function (user) {
return $scope.selectedUser == user;
}
});
