22-service之show hide disable

jojo999888

于 2017-07-27 11:22:50 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/gc_20160403/article/details/76177545

angularJS 专栏收录该内容

35 篇文章

订阅专栏

本文通过三个实例展示了如何使用AngularJS中的指令来控制元素的显示与隐藏状态，包括按钮禁用、条件显示文本及直接控制元素的可见性。这些示例有助于理解AngularJS中数据绑定与指令的实际应用。

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

<!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=false">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>按钮
</p>
<p>
{{ mySwitch }}
</p>
</div> 

</body>
</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="" ng-init="hour=13">

<p ng-show="hour > 12">我是可见的。</p>

</div>

</body>
</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>