AngularJS对HTML的操作
- ng-disabled
ng-disabled指令可以把数据绑定到HTML的 disabled属性上去。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="myButton=true">
<button ng-disabled="myButton">按钮</button>
<input type="checkbox" ng-model="myButton" />点这里观察前后按钮和文本的变化
文本：{{ myButton }}
</div>
</body>
</html>
ng-disabled 指令把数据 "myButton"绑定 到 HTML 的 disabled 属性。
ng-model 指令绑定 “myButton” 到 HTML input checkbox 元素的内容（value）。
如果 mySwitch 为true, 按钮将不可用:
- ng-show
ng-show指令用来显示或隐藏一个HTML元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/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>
布尔值也可以用表达式代替
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="number=1">
<p ng-show="number<2">显示1</p>
<p ng-show="number=1">显示2</p>
<p ng-show="number>2">隐藏</p>
</div>
</body>
</html>
- ng-hide
ng-hide也是用来显示或隐藏HTML元素的，在效果上和ng-show相反
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/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>
1158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
