AngularJS入门（五）

AngularJS HTML DOM 

1.  AngularJS有自己的HTML属性指令，比如ng-disabled、ng-show

2.  ng-disabled指令直接绑定应用程序数据到HTML的diabled属性，示例如下：

<div ng-app="">
 <p>
  <button ng-disabled="mySwitch">点我！</button>
 </p>

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

点击选中checkbox，则按钮disabled=disabled。

注：ng-disabled指令绑定应用程序数据 mySwitch到HTML的disabled属性；ng-model绑定mySwitch到HTML input checkbox元素的内容（value），按钮disabled属性将随着checkbox的内容（值）变化。

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

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

注：ng-show指令可以使用任意布尔型表达式来赋值。

AngularJS HTML事件

1.  ng-click指令定义了一个AngularJS事件

<div ng-app="" ng-controller="myController">
<button ng-click="count = count + 1">点我!</button>
 <p>{{ count }}</p>
</div>
<script>
function myController($scope) {
    $scope.count = 0;
}
</script> 

注：此例中使用控制器myController初始化应用程序数据count = 0，并且将点击事件绑定给表达式count++，点击一次，count加1，在<p>元素中实时打印输出count的值。
2.  ng-hide指令显示或隐藏HTML元素（对比ng-show指令），true为隐藏，false为显示，同样可以用布尔型表达式来赋值

<div ng-app="" ng-controller="personController">
 <button ng-click="toggle()">隐藏/显示</button>
<p ng-hide="myVar">
名: <input type=text ng-model="person.firstName"><br>
姓: <input type=text ng-model="person.lastName"><br><br>
姓名: {{person.firstName + " " + person.lastName}}
</p>

</div>
<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe"
    };
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
}
</script> 

注：控制器personController初始化了应用程序变量myVar并通过函数toggle将myVar取反，将myVar绑定给ng-hide指令，则随着myVar的变化，ng-hide指令控制了HTML元素的显示和隐藏（ng-show同样可以有这样的效果，不过初始状态为隐藏而已--myVar值为false）。

声明：此文主要内容来自于： http://www.w3cschool.cc/angularjs