Home > Article > Web Front-end > AngularJS ng-show directive
1. Problem background
The ng-show instruction of AngularJS, when the value is true, the HTML element is displayed; when the value is false, the HTML element is hidden
2. Implementation source code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之ng-show指令</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-show="flag">查询</button><br> <input type="checkbox" ng-model="flag" />老鼠<br> <input type="radio" ng-show="!flag" />猫<br> <label>{{flag}}</label> </p> </body> </html>
3. Implement the source code
(1) Check the check box
Check the check box, the button will be displayed, and the radio button will be hidden
(2) Uncheck the check box
Uncheck the check box, the button is hidden, and the radio button is displayed
## The above is the content of the ng-show directive of AngularJS. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!