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>
  • 相关阅读:
    Java接口的真正意义
    从机械自动化专业转行到Java工程师的学习之路
    程序员必备的17个软件开发工具
    【Java练手项目】Java外卖点餐系统
    Java接口的其他使用语法
    【Java练手项目】Java在线考试系统
    IDEA最新版本中maven配置默认选项
    Java 企业级项目需求文档
    Elasticsearch 搜索数量不能超过10000的解决方案
    Java中TreeSet怎么实现?(详解)
  • 原文地址:https://www.cnblogs.com/cf924823/p/5231351.html
Copyright © 2011-2022 走看看