AngularJS HTML DOM

1 ng-disabled 指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

<div ng-app="" ng-init="mySwitch=true">
    <p>
        <button ng-disabled="mySwitch">点我!</button>
    </p>

    <p>
        <input type="checkbox" ng-model="mySwitch">按钮
    </p>

    <p>
        {{ mySwitch }}
    </p>
</div>

• 实例讲解：

ng-disabled 指令绑定应用程序数据 “mySwitch” 到 HTML 的 disabled 属性。
ng-model 指令绑定 “mySwitch” 到 HTML input checkbox 元素的内容（value）。

如果 mySwitch 为true, 按钮将不可用:

<p>
    <button disabled>点我！</button>
</p>

如果 mySwitch 为false, 按钮则可用

<p>
    <button>点我!</button>
</p>

2 ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素

<div ng-app="">
    <p ng-show="true">我是可见的。</p>

    <p ng-show="false">我是不可见的。</p>
</div>

3 ng-hide 指令

ng-hide 指令用于隐藏或显示 HTML 元素。

<div ng-app="">
    <p ng-hide="true">我是不可见的。</p>

    <p ng-hide="false">我是可见的。</p>
</div>

4 ng-if 指令

与ng-show不同的是ng-if会把元素从DOM中移除

<div ng-app="">
    <p ng-if="true">我是可见的。</p>

    <p ng-if="false">我是不可见的。</p>
</div>

5 angular.element方法

angular.element方法用于操作DOM元素。
angular.element(选择器或者元素).addClass(“s”);

5.1 常用方法

addClass()-为每个匹配的元素添加指定的样式类名
after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
append()-在每个匹配元素里面的末尾处插入参数内容
attr() - 获取匹配的元素集合中的第一个元素的属性的值
bind() - 为一个元素绑定一个事件处理程序
children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选
clone()-创建一个匹配的元素集合的深度拷贝副本
contents()-获得匹配元素集合中每个元素的子元素，包括文字和注释节点
css() - 获取匹配元素集合中的第一个元素的样式属性的值
data()-在匹配元素上存储任意相关数据
detach()-从DOM中去掉所有匹配的元素
empty()-从DOM中移除集合中匹配元素的所有子节点
eq()-减少匹配元素的集合为指定的索引的哪一个元素
find() - 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代
hasClass()-确定任何一个匹配元素是否有被分配给定的（样式）类
html()-获取集合中第一个匹配元素的HTML内容
next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选
		 择器时，才会返回此元素
on() - 在选定的元素上绑定一个或多个事件处理函数
off() - 移除一个事件处理函数
one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
parent() - 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
prepend()-将参数内容插入到每个匹配元素的前面（元素内部）
prop()-获取匹配的元素集中第一个元素的属性（property）值
ready()-当DOM准备就绪时，指定一个函数来执行
remove()-将匹配元素集合从DOM中删除。（同时移除元素上的事件及 jQuery 数据。）
removeAttr()-为匹配的元素集合中的每个元素中移除一个属性（attribute）
removeClass()-移除集合中每个匹配元素上一个，多个或全部样式
removeData()-在元素上移除绑定的数据
replaceWith()-用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
text()-得到匹配元素集合中每个元素的合并文本，包括他们的后代
toggleClass()-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。
			   即：如果存在（不存在）就删除（添加）一个类
triggerHandler() -为一个事件执行附加到元素的所有处理程序
unbind() - 从元素上删除一个以前附加事件处理程序
val()-获取匹配的元素集合中第一个元素的当前值
wrap()-在每个匹配的元素外层包上一个html元素

6 ng-class

ng-class用于动态设置元素的class，有一下几种使用方式。

• 方式1

 <div ng-class="{true : 'checker disabled',false : 'checker' }[selectAllButton]"></div>
"checker disabled","checker"是CSS样式,selectAllButton是判断条件，值为"true"or"false" 

• 方法 2

<div ng-class="{'checker disabled' : item.disab, 'checker' : !item.disab}"></div>
item.disab是判断条件，值为“true”or“false”

• 方式3

<div ng-class="{{bClass}}"></div>
$scope.bClass = "{'red':true,'green':false}"

• 方式 4

<div ng-class="tempClass"></div>
tempClass是CSS样式名称