AngularJS ng-show指令

AngluarJS的ng-show指令是用来显示或隐藏指定的HTML元素。如果在ng-show属性中给出的表达式是_true，那么该HTML元素将显示，否则它将隐藏该HTML元素。它被所有的HTML元素所支持。

语法:

<element ng-show="expression"> 
    Contents... 
</element>

参数植:

表达式：它规定只有在所需表达式返回_true时才会显示该元素。

示例1：本例使用ng-show指令在勾选复选框后显示HTML元素。

<!DOCTYPE html>
<html>
 
<head>
    <title>ng-show Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
 
<body>
    <div ng-app="app" ng-controller="geek">
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>ng-show Directive</h2>
        <input id="chshow"
               type="checkbox"
               ng-model="show" />
        <label for="chshow">
            Show Paragraph
        </label>
        <p ng-show="show"
           style="background: green;
                  color: white;
                  font-size: 14px;
                  width:35%;
                  padding: 10px;">
            Show this paragraph using ng-show
        </p>
 
    </div>
    <script>
        var myapp = angular.module("app", []);
        myapp.controller("geek", function(scope) {
            scope.show = false;
        });
    </script>
</body>
</html>

输出:

AngularJS ng-show指令

例子2：这个例子使用ng-show指令来显示输入的数字a是否是5的倍数。

<!DOCTYPE html>
<html>
 
<head>
    <title>ng-show Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
 
<body ng-app="app" style="text-align:center">
    <div ng-controller="geek" ng-init="val=0">
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h3>ng-show Directive</h3>
        Enter a number:
        <input type="text" ng-model="val"
               ng-keyup="check(val)">
        <div ng-hide="show">
            <h3>
                The number is multiple of 5
            </h3>
        </div>
        <div ng-show="show">
            <h3>
                The number is not a multiple of 5
            </h3>
        </div>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['scope', function(scope) {
            scope.check = function(val) {
                scope.show = val % 5 == 0 ? false : true;
            };
        }]);
    </script>
</body>
</html>