angular之单选框与ng-show

最新推荐文章于 2023-08-30 19:27:49 发布

原创最新推荐文章于 2023-08-30 19:27:49 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #ng-show

Angularjs 专栏收录该内容

13 篇文章

订阅专栏

本文展示了一个使用AngularJS实现的简单网站开关功能示例。通过两个单选按钮控制网站的状态（开启或关闭），并根据状态显示不同的内容。当选择关闭网站时，会显示关闭的原因。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="hd" ng-controller="ctrl">
            网站开启关闭
            <input type="radio" ng-model="status" value="1"/>开启
            <input type="radio" ng-model="status" value="0"/>关闭
            {{status}}
            <div ng-show="status==0">
                <h2>关闭原因：</h2>
                <textarea name="" rows="" cols="">
                    后盾网后台维护中~~~
                </textarea>
            </div>
        </div>
        <script type="text/javascript">
            var m=angular.module("hd",[]);
            m.controller("ctrl",['$scope',function($scope){
                $scope.status=1;
            }]);
        </script>
    </body>
</html>