1. Problem background
AngularJS’s ng-hide directive, when its value is true, hides HTML elements; when its value is false, displays HTML elements
##2. Implementation source code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之ng-hide指令</title> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <p ng-app="" ng-init="flag=true"> <button ng-hide="flag">查询</button><br> <input type="checkbox" ng-model="flag" />老鼠<br> <input type="radio" ng-hide="!flag" />猫<br> <label>{{flag}}</label> </p> </body> </html>
3. Realization result
(1) Check the check box
The button is hidden and the radio button is displayed
## (2) Uncheck the check box
The button is displayed and the radio button is hidden
Above This is the content of the ng-hide directive of AngularJS. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!