10-DOM操作和指令扩展操作
接下来看看ODM 的显示和隐藏。
<div ng-controller="Aaa">
<input type="checkbox" ng-model="flag"/>
<div ng-show="flag">xiecg1</div>
<div ng-hide="flag">xiecg2</div>
<div ng-if="flag">xiecg3</div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.flag = true;
}]);
</script>
ng-show：是否显示（display:block;）
ng-hide：是否隐藏（display:none;）
ng-if：是否渲染这个DOM元素（DOM的添加和删除）
我们用input控制flag的值，当flag值发生改变的时候，从而影响DOM元素。ng-if和ng-show/hide最大的差别就是一个是元素的显示和隐藏，一个是添加和删除。
除此之外，还有ng-switch。
<div ng-controller="Aaa">
<input type="checkbox" ng-model="flag"/>
<div ng-switch on="flag">
<p ng-switch-default>默认的效果</p>
<p ng-switch-when="false">选中的效果</p>
</div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.flag = true;
}]);
</script>
有两个效果，默认和切换。在他们的父级上有一个on指令，绑定flag数据，为true。所以一开始是默认的状态。
点击input，flag为false，就为切换的状态，如果在controller中初始化就是false，一开始就是却换的状态。
还有一个open
<details ng-open="true">
<summary>name</summary>
<p>xiecg</p>
</details>
展开和收缩，属于就是HTML5中的一个元素，这个就不多说了。
下面继续angular的其他指令。
1：ng-init
<div ng-controller="Aaa">
<p ng-init="text='hello'">{{text}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
//$scope.text= 'xiecg';
}]);
</script>
除了在controller上初始化值，也可以直接在DOM元素上使用init的形式初始值。
平时最好在controller上初始化值，这样结构清晰。那init什么时候使用比较好呢 ? 看例子：
<div ng-controller="Aaa">
<div ng-repeat="arrOuter in arr" ng-init="outerIndex=$index">
<p ng-repeat="arrInner in arrOuter" ng-init="innerIndex=$index">
{{arrInner}}：{{outerIndex}} {{innerIndex}}
</p>
</div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.arr = [['a','b'],['c','d']];
}]);
</script>
使用init得到遍历的数据索引。
2：ng-include
<div ng-controller="Aaa">
<div ng-include="'temp.html'"></div>
</div>
引入模板文件，其实就是ajax，需要在服务器运行。
3：ng-model
前面的几篇文章已经具体介绍过ng-model的用法了，我们再看看扩展部分。
<div ng-controller="Aaa">
<input type="text" ng-model="text" ng-model-options="{updateOn : 'blur'}">
<div>{{text}}</div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.text= 'xiecg';
}]);
</script>
我们在表单输入时，并不是及时的更新视图上的数据，使用updateOn设置为blur当光标离开时更新数据。
4：ng-controller
前面的例子都是这种格式：
<div ng-controller="Aaa">{{text}}</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.text= 'xiecg';
}]);
</script>
但是如果我们的项目越来越大的时候，我们有更多的方式可以选择：
<div ng-controller="FnAaa as a1">
<p>{{text}}</p>
<div>{{a1.text}}：{{a1.show()}}</div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',FnAaa]);
function FnAaa($scope){
$scope.text = 'hello';
$scope.arr = [['a','b'],['c','d']];
};
FnAaa.prototype.num = 53;
FnAaa.prototype.show = function(){
return 'show';
};
FnAaa.prototype.text = 'HELLO';
</script>
是不是很熟悉，我们可以使用原型对象，使用as得到原型对象。
学习笔记，如有不足，请指正！转载请保留原文链接，谢谢。
最後，微博求粉，谢谢。
