AngularJS 事件

ng-click 指令

ng-click 指令定义了 AngularJS 点击事件。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>

    <body>
        <div ng-app="myApp" ng-controller="myCtrl">

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

            <p>{{ count }}</p>
        </div>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.count = 0;
            });
        </script>
    </body>

</html>

隐藏 HTML 元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="personCtrl">
            <button ng-click="toggle()">隐藏/显示</button> //ng-click里面是一个toggle()函数
            <p ng-hide="myVar">
                名: <input type=text ng-model="firstName"><br> 
                姓: <input type=text ng-model="lastName"><br><br> 
                姓名: {{firstName + " " + lastName}}
            </p>
        </div>
        <script>
            var app = angular.module('myApp', []);
            app.controller('personCtrl', function($scope) {
                $scope.firstName = "John";
                $scope.lastName = "Doe";
                $scope.myVar = false;
                $scope.toggle = function() {   //tpggle后面没有()
                    $scope.myVar = !$scope.myVar; //用于切换myVar的值
                }
            });
        </script>
    </body>
</html>

应用解析:

第一部分 personController与控制器章节类似。

应用有一个默认属性: $scope.myVar = false;

ng-hide 指令设置 <p>元素及两个输入域是否可见， 根据 myVar 的值 (true 或 false) 来设置是否可见。

toggle() 函数用于切换 myVar 变量的值（true 和 false）。

显示 HTML 元素

posted @ 2016-07-13 17:47  Chris_在IT道路上前行  阅读(200)  评论(0)  编辑  收藏  举报