zoukankan      html  css  js  c++  java
  • angularjs html事件(ng-click,ng-hide,ng-show)

    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=" 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=" 100px;height: 100px;background-color: #cccccc"></div>
            </div>
            
        </div>
    </body>
    </html>
  • 相关阅读:
    Windows远程连接MAC桌面
    NGUI和UGUI图片字 艺术字(Bitmap图片转文字)制作方法
    注册其它地区Apple ID
    酷派5890 ROM教程
    WWW压缩解压缩
    SerializeField和Serializable
    新手须知 C、C++和VC++之间的区别
    Android 监听双卡信号强度(附完整代码)
    git本地及远程分支回退
    PathInterpolator
  • 原文地址:https://www.cnblogs.com/housh/p/4244126.html
Copyright © 2011-2022 走看看