AngularJS入门（12）---点击事件

最新推荐文章于 2023-07-16 21:10:29 发布

weixin_43735372

最新推荐文章于 2023-07-16 21:10:29 发布

阅读量442

点赞数 2

分类专栏：点击事件文章标签： AngularJS

本文链接：https://blog.csdn.net/weixin_43735372/article/details/84796491

版权

点击事件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ng-click

ng-click指令用于点击事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myContr">
        <button ng-click="number=number+1">累加器</button>
        <p>{{number}}</p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myContr', function ($scope) {
            $scope.number = 0;
        });
    </script>
</body>
</html>

具体实例

也可以结合上篇中提到的ng-show和ng-hide来使用ng-click

先看看ng-hide的效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myContr">
        <button ng-click="myClick()">点击观察</button>
        <p ng-hide="myHide">
            姓：<input type="text" ng-model="firstName"><br><br>
            名：<input type="text" ng-model="lastName"><br><br>
            全名：{{firstName+lastName}}
        </p>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myContr', function ($scope) {
            $scope.firstName = "张";
            $scope.lastName = "敏";
            $scope.myHide = false;
            $scope.myClick = function () {
                $scope.myHide = !$scope.myHide;
            }
        });
    </script>
</body>
</html>

再看看ng-show的效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myContr">
        <button ng-click="myClick()">点击观察</button>
        <p ng-show="myShow">
            姓：<input type="text" ng-model="firstName"><br><br>
            名：<input type="text" ng-model="lastName"><br><br>
            全名：{{firstName + lastName}}
        </p>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myContr', function ($scope) {
            $scope.firstName = "张";
            $scope.lastName = "敏";
            $scope.myShow = true;
            $scope.myClick = function () {
                $scope.myShow = !$scope.myShow;
            }
        });
    </script>
</body>
</html>

weixin_43735372

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
AngularJS入门（12）---点击事件

ng-clickng-click指令用于点击事件&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"&gt;&lt;/scr
复制链接

扫一扫