码迷,mamicode.com
首页 > Web开发 > 详细

angularjs html事件(ng-click,ng-hide,ng-show)

时间:2015-01-23 14:39:21      阅读:882      评论:0      收藏:1      [点我收藏+]

标签:

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>

 

angularjs html事件(ng-click,ng-hide,ng-show)

标签:

原文地址:http://www.cnblogs.com/housh/p/4244126.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!