zoukankan      html  css  js  c++  java
  • AngularJS 事件

    ng-click 指令

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

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        </head>
    
        <body>
            <div ng-app="myApp" ng-controller="myCtrl">
    
                <button ng-click="count = count + 1">点我!</button>
    
                <p>{{ count }}</p>
            </div>
            <script>
                var app = angular.module('myApp', []);
                app.controller('myCtrl', function($scope) {
                    $scope.count = 0;
                });
            </script>
        </body>
    
    </html>

    隐藏 HTML 元素

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        </head>
        <body>
            <div ng-app="myApp" ng-controller="personCtrl">
                <button ng-click="toggle()">隐藏/显示</button> //ng-click里面是一个toggle()函数
                <p ng-hide="myVar">
                    名: <input type=text ng-model="firstName"><br> 
                    姓: <input type=text ng-model="lastName"><br><br> 
                    姓名: {{firstName + " " + lastName}}
                </p>
            </div>
            <script>
                var app = angular.module('myApp', []);
                app.controller('personCtrl', function($scope) {
                    $scope.firstName = "John";
                    $scope.lastName = "Doe";
                    $scope.myVar = false;
                    $scope.toggle = function() {   //tpggle后面没有()
                        $scope.myVar = !$scope.myVar; //用于切换myVar的值
                    }
                });
            </script>
        </body>
    </html>

    应用解析:

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

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

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

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

    显示 HTML 元素

  • 相关阅读:
    toString的本质 以及String.valueOf()
    css3选择符
    HTML5标签
    css3-动画
    2D功能函数
    css过度
    css渐变
    BFC-块级格式化上下文
    表单补充
    表格补充:
  • 原文地址:https://www.cnblogs.com/chrisghb8812/p/5667770.html
Copyright © 2011-2022 走看看