angularjs html事件（ng-click,ng-hide,ng-show）

浏览数：40 / 时间：2015年06月09日

ng-click:单击事件,

ng-hide:控制某款元素是否隐藏，true隐藏 false 显示

ng-show：控制某款元素是否显示，true显示 false 隐藏

可以参考页面：http://www.w3cschool.cc/angularjs/angularjs-html-events.html

个人源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="">
<head>
    <title>html事件</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>
    <script>
        function mycon($scope) {
            $scope.num = 0;
            $scope.fun = function() {
                $scope.num += 1;
            };
            

            $scope.hide = false;
            $scope.toggle1 = function () {
                $scope.hide = !$scope.hide;
            };


            $scope.show = true;
            $scope.toggle2 = function () {
                $scope.show = !$scope.show;
            };
        }
    </script>
</head>
<body>
    <div ng-controller="mycon">
        <h2>ng-click</h2>
        <input type="button" value="点击" ng-click="fun()"/>
        <p>{{num}}</p>
        
        <h2>ng-hide</h2>
        <input type="button" value="ng-hide" ng-click="toggle1()"/>
        <div ng-hide="hide">
            <p >ng-hide交替可见性</p>
            <div style="width: 100px;height: 100px;background-color: #cccccc"></div>
        </div>
        
        <h2>ng-show</h2>
        <input type="button" value="ng-show" ng-click="toggle2()"/>
        <div ng-show="show">
            <p >ng-hide交替可见性</p>
            <div style="width: 100px;height: 100px;background-color: #cccccc"></div>
        </div>
        
    </div>
</body>
</html>