版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zzp961224/article/details/70336145
这个demo的大致思路是这样的：在登录之前会有一个 接受协议的单选框，只有你选择了，登录按钮才可以点击否则无效，还有一个可供查看协议内容的button，笔者的这个demo主要使用到的是ng-show和ng-disabled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="hd" ng-controller="ctrl">
{{status}}
<!--记录单选框的状态，未勾选为true，勾选了为false-->
<lable><input type="checkbox" ng-model="status">接受协议</lable>
<!--设置copyright默认为false，当触发click事件时，对当前copyright状态取反-->
<button ng-init="copyright=false" ng-click="copyright=!copyright">查看协议</button>
<br>
<textarea ng-show="copyright">协议内容：这里是协议内容。</textarea>
<!--<textarea ng-if="copyright">协议内容：这里是协议内容。</textarea>-->
<br>
<button ng-disabled="!status">登录</button>
</div>
<script>
var m = angular.module('hd', []);
m.controller('ctrl', ['$scope', function ($scope) {
}]);
</script>
</body>
</html>顺便提一下ng-show与ng-if的异同。它们两个都能实现内容的隐藏与显示，不同的是，ng-show是对dom节点进行样式的添加：display:none。而ng-if则是直接对dom节点进行增删操作。有兴趣的读者可以F12看看具体的变化过程。