《我的Angular入坑記》——一個使用ng-show的demo
阿新 • • 發佈：2019-01-13
這個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看看具體的變化過程。