angularJS DOM操作相关指令

DOM操作相关指令

ng-show:针对元素的展现、隐藏，是通过CSS的display来实现的。参数true是展现，false是隐藏。隐藏时不保留该位置。

代码示例：

<div ng-show="true">bbbbbbbbb</div>

页面结果展示：



ng-hide：与ng-show的作用相反，true隐藏，false显示

ng-if：针对元素的操作，true显示，false隐藏。ng-if不是通过CSS样式来针对元素的操作，而是针对DOM节点，true是添加节点，false是删除节点。

代码示例：（通过绑定的数据来控制）

<script>
var m = angular.module('myApp',['ngSanitize']);//引入相应模块
m.controller('Aaa',['$scope',function($scope){

$scope.bBtn = true;

}]);
</script>

<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<div ng-if="bBtn"&
4000
gt;bbbbbbbbb</div>
</div>

页面结果展示：





ng-switch：有选择性的进行显示、隐藏

-on ：与ng-switch配合使用

-default：默认true的值，显示该值

-when：false时显示该值

代码示例：

<script>
var m = angular.module('myApp',['ngSanitize']);//引入相应模块
m.controller('Aaa',['$scope',function($scope){

$scope.bBtn = true;

}]);
</script>

<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<div ng-switch on="bBtn">
<p ng-switch-default>默认的效果</p>
<p ng-switch-when="false">切换的效果</p>
</div>
</div>

页面结果展示：





ng-open：与HTML5中的open属性相类似，用于只兼容的谷歌和safari的标签。true展开详细内容，false不展示。

代码示例：

<script>
var m = angular.module('myApp',['ngSanitize']);//引入相应模块
m.controller('Aaa',['$scope',function($scope){

$scope.bBtn = true;

}]);
</script>

<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<details ng-open="bBtn">
<summary>lalalala</summary>
<p>kdsvbckunsdjnlknfuvbnkjdflknvsmlcdknfvlcknrejncjfnvfd</p>
</details>
</div>

页面结果展示：