angularJs中ng-if,ng-show,ng-disabled,ng-init使用案例
白修谨
ng-show显示
ng-hide隐藏
ng-show和ng-if的区别：ng-show是用css样式操控，ng-if是移除整个dom元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="module" ng-controller="ctrl">
{{name}}
{{status}}
<!--复选框name,勾上显示ng-show="name"和ng-if="name"的内容-->
<input type="checkbox" ng-model="name">
<span ng-show="name">感谢浏览泠泠在路上的博客</span>
<span ng-if="name">感谢浏览泠泠在路上的博客</span>
<!--复选框status-->
<label><input type="checkbox" ng-model="status"> 接收信息</label>
<!--ng-init="info=false"，info初始化为false-->
<!--ng-click="info=!info"，点击切换true和false-->
<button ng-init="info=false" ng-click="info=!info">查看信息</button>
<br/>
<!--ng-show="info"，info为true时显示-->
<textarea ng-show="info">信息内容: 感谢浏览泠泠在路上的博客文章。</textarea>
<br/>
<!--ng-disabled="!status"，默认按钮不可用-->
<button ng-disabled="!status">多谢接收信息</button>
</div>
<script>
var m = angular.module('module', []);
m.controller('ctrl', ['$scope', function ($scope) {
}]);
</script>
</body>
</html>
类似资料：