AngularJS DOM

  • ng-disabled 指令

    AngularJS 具有用于将应用程序数据绑定到 HTML DOM 元素的属性的指令。
    ng-disabled 指令将 AngularJS 应用程序数据绑定到HTML元素的disabled 属性。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>菜鸟教程(cainiaoya.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="" ng-init="mySwitch=true">
           <p><button ng-disabled="mySwitch">点击我!</button></p>
           <p><input type="checkbox" ng-model="mySwitch">按钮</p>
           <p>{{ mySwitch }}</p>
        </div> 
    </body>
    </html>
    
    尝试一下
    示例说明:
    ng-disabled 指令将应用程序数据 mySwitch 绑定到HTML按钮的 disable 属性。
    ng-model 指令将 HTML 复选框元素的值绑定到 mySwitch 的值。
    如果 mySwitch 的值评估为 true,则该按钮将被禁用
    <p>
    <button disabled>点击我!</button>
    </p>
    
    如果mySwitch的值评估为false,则不会禁用该按钮:
    <p>
    <button>点击我!</button>
    </p>
    
  • ng-show 指令

    ng-show 指令显示或隐藏 HTML 元素。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>菜鸟教程(cainiaoya.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="">
            <p ng-show="true">我是显示的可见的</p>
            <p ng-show="false">我是不显示的</p>
        </div> 
    </body>
    </html>
    
    尝试一下
    ng-show 指令基于 ng-show 的值显示(或隐藏)HTML元素。
    您可以使用任何计算结果为 true 或 false 的表达式:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>菜鸟教程(cainiaoya.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="" ng-init="hour=13">
            <p ng-show="hour > 12">满足条件了我是显示的可见的</p>
        </div> 
    </body>
    </html>
    
    尝试一下
  • ng-hide 指令

    ng-hide 指令显示或隐藏 HTML 元素。
    <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>菜鸟教程(cainiaoya.com)</title>
        <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
        </head>
        <body>
            <div ng-app="">
                <p ng-hide="true">我是不显示的</p>
                <p ng-hide="false">我是显示的可见的</p>
            </div> 
        </body>
        </html>
    
    尝试一下
    在下一章 AngularJS 事件,有更多示例,使用单击按钮隐藏HTML元素。