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>

 

相关文章