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

    ng-click 指令

     点击加减运算

    <div ng-app="myApp" ng-controller="myCtrl">
    <button ng-click="count = count + 1">加!</button>
    <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>

     点击进行隐藏显示切换

    <div ng-app="myApp" ng-controller="personCtrl">
    <button ng-click="toggle()">隐藏/显示</button>
    <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() {
            $scope.myVar = !$scope.myVar;
        }
    });
    </script>

    应用解析:

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

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

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

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

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

     ng-show

    <div ng-app="myApp" ng-controller="personCtrl">
    <button ng-click="toggle()">隐藏/显示</button>
    <p ng-show="myVar">
    名: <input type=text ng-model="person.firstName"><br>
    姓: <input type=text ng-model="person.lastName"><br><br>
    姓名: {{person.firstName + " " + person.lastName}}
    </p>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope) {
        $scope.person = {
            firstName: "John",
            lastName: "Doe"
        };
        $scope.myVar = true;
        $scope.toggle = function() {
            $scope.myVar = !$scope.myVar;
        };
    });
    </script>
  • 相关阅读:
    CentOS7.0 内核(3.10.0-123.el7.x86_64)bug导致KVM物理机重启
    Jenkins控制台输出乱码
    MySQL 主从失败报错:Last_SQL_Errno: 1594
    PHP7添加opcache.so模块
    python 网络爬虫requests模块
    Python 运算符
    tmux使用笔记
    linux使脚本在后台运行
    git 使用钩子直接推送到工作目录
    Git使用笔记
  • 原文地址:https://www.cnblogs.com/cf924823/p/5231351.html
Copyright © 2011-2022 走看看