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元素。