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>

 

相关文章