AngularJS学习篇（十四）

AngularJS 事件

ng-click 指令

ng-click 指令定义了 AngularJS 点击事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular-1.6.3/angular.js"></script>
    <style>
    </style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <p ng-click="toggle()">按钮</p>
    <p ng-hide="myVar">
        名: <input type="text" ng-model="firstName"><br>
        姓名: <input type="text" ng-model="lastName"><br>
        <br>
        Full Name: {{firstName + " " + lastName}}
    </p>

</div>
<script>
    var app=angular.module("myApp",[]);
    app.controller("myCtrl",function ($scope) {
        $scope.count = 0;
        $scope.firstName="chen";
        $scope.lastName="yunfei";
        $scope.myVar=false;
        $scope.toggle=function () {
            $scope.myVar=!$scope.myVar;
        }
    })
</script>
</body>
</html>

应用解析:

第一部分 personController与控制器章节类似。

应用有一个默认属性: $scope.myVar = false;

ng-hide 指令设置 <p>元素及两个输入域是否可见，根据 myVar 的值 (true 或 false) 来设置是否可见。

toggle() 函数用于切换 myVar 变量的值（true 和 false）。

ng-hide="true" 让元素 不可见。

ng-show 指令可用于设置应用中的一部分是否可见。

ng-show="false" 可以设置 HTML 元素 不可见。

ng-show="true" 可以以设置 HTML 元素可见。

以下实例使用了 ng-show 指令:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular-1.6.3/angular.js"></script>
    <style>
    </style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <p ng-click="toggle()">按钮</p>
    <p ng-show="myVar">
        名: <input type="text" ng-model="firstName"><br>
        姓名: <input type="text" ng-model="lastName"><br>
        <br>
        Full Name: {{firstName + " " + lastName}}
    </p>

</div>
<script>
    var app=angular.module("myApp",[]);
    app.controller("myCtrl",function ($scope) {
        $scope.count = 0;
        $scope.firstName="chen";
        $scope.lastName="yunfei";
        $scope.myVar=true;
        $scope.toggle=function () {
            $scope.myVar=!$scope.myVar;
        }
    })
</script>
</body>
</html>

相关阅读:
ER/数据库建模工具之MySQL Workbench的使用
HBase基础架构及原理
HBase在HDFS上的目录介绍
zookeeper的三种安装模式
YCSB之HBase性能测试
kerberos简单介绍
springboot 文件上传大小配置
List集合三种遍历方法
Linux中给普通用户添加sudo权限
Linux查看所有用户和组信息

原文地址：https://www.cnblogs.com/dehuachenyunfei/p/6736101.html