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>
  • 相关阅读:
    [转]XSLT <xsl:output> 元素
    XSLT教程
    [转]web.xml文件中配置<mimemapping>下载文件类型
    IntelliJ IDEA 付费版 免费版比较
    tomcat 显示隐藏目录结构
    XHTMLMP 7788
    [转]HttpSessionListener 和HttpSessionBindingListener的区别
    error LNK2005: _DllMain@12 已经在 LIBCMTD.lib(dllmain.obj) 中定义
    请确保在应用程序配置的 \\ 节中包括 System.Web.SessionStateMod 或自定义会话状态模块
    NuGet 是个什么玩意?
  • 原文地址:https://www.cnblogs.com/cf924823/p/5231351.html
Copyright © 2011-2022 走看看