AngularJS HTML 事件


AngularJS 有自己的 HTML 事件指令。


ng-click 指令

ng-click 指令定义了一个 AngularJS 单击事件。

AngularJS 实例

<div ng-app="" ng-controller="myController">

<button ng-click="count = count + 1">点我!</button>

<p>{{ count }}</p>

</div>

尝试一下 »


隐藏 HTML 元素

ng-show 指令定义了应用程序的可见性。

ng-show="true"(布尔值)让元素可见。

ng-show="false"(布尔值)让元素不可见。

AngularJS 实例

<div ng-app="" ng-controller="personController">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-show="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 = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
}
</script>

尝试一下 »

实例讲解:

personController 的第一部分与控制器一章中的相同。

应用程序有一个新的 默认属性:$scope.myVar = true;

ng-show 指令使用变量 myVar (true 或 false)。

新的函数 toggle() 把 myVar 值在 true 和 false 之间切换。


分享到
更多 0