《我的Angular入坑记》——一个使用ng-show的demo

来源：互联网发布：淘宝电脑认证入口编辑：程序博客网时间：2024/06/01 07:11

这个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看看具体的变化过程。

2 0