AngularJS入门-（9）HTML DOM

最新推荐文章于 2023-03-15 15:16:45 发布

炽天使_1985

最新推荐文章于 2023-03-15 15:16:45 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/wzjisking/article/details/76546449

AngularJS 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了Angular中的三个常用指令：ng-disabled、ng-show 和 ng-hide 的使用方法及应用场景。通过具体的HTML示例展示了如何利用这些指令控制元素的状态和显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ng-disabled 指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/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 的 disabled 属性。
ng-model 指令绑定 “mySwitch” 到 HTML input checkbox 元素的内容（value）。

ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
    <p ng-show="true">可见的</p>
    <p ng-show="false">不可见</p>
</div>
</body>
</html>

ng-hide 指令

ng-hide 指令用于隐藏或显示 HTML 元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
    <p ng-hide="true">不可见的</p>
    <p ng-hide="false">可见</p>
</div>
</body>
</html>