上一节:
下一节:

  AngularJS DOM

  • ng-disabled 指令

    AngularJS 具有用于将应用程序数据绑定到 HTML DOM 元素的属性的指令。
    ng-disabled 指令将 AngularJS 应用程序数据绑定到HTML元素的disabled 属性。 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.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>蝴蝶教程(jc2182.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>蝴蝶教程(jc2182.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>蝴蝶教程(jc2182.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元素。
上一节:
下一节: