zoukankan      html  css  js  c++  java
  • AngularJS 学习之事件

    1.ng-click指令:定义了AngularJS点击事件

    <div ng-app="" ng-controller="myCtrl">

    <button ng-click="count=count+1">点我!</button>

    <p>{{count}}</p>

    </div>

    2.隐藏HTML元素:

    **ng-hide指令用于设置应用部分是否可见

    **ng-hide="true"设置HTML元素不可见

    **ng-hide="false"设置HTML元素可见

    <div ng-app="myApp" ng-controller="personCtrl">

    <button ng-click="toggle()">隐藏/显示</buttton>

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

    名:<input type="text" ng-model="firstName"><br>

    姓名:<input type="text" ng-model="lastName"><br>

    <br>

    Full Name:{{firstName+" "+lastName}}

    </p>

    <script>

    var app=angular.module('myApp',[]);

    app.controller('personCtrl',function($scope){

      $scope.firstName="John",

      $scope.lastName="Doe",

      $scope.myVar=false;

      $scope.toggle=function(){                            //toggle()函数用于切换myVar变量的值(true或false)

        $scope.myVar=!$scope.myVar();

      }

    });

    </script>

    </div>

    3.显示HTML元素:ng-show指令用于设置应用中的一部分是否可见;

    **ng-show="false"可以设置HTML元素不可见

    **ng-show="True"可以设置HTML元素可见

    <div ng-app="myApp" ng-controller="personCtrl">

    <button ng-click="toggle()">隐藏/显示</button>

    <p ng-show="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=true;

      $scope.toggle=function(){

        $scope.myVar=! $scope.myVar;

      }

    });

    </script>

  • 相关阅读:
    日志
    mysql锁
    慢查询
    auto_increment
    脚本
    服务器元数据
    复制表及表数据
    临时表
    (一)校园信息通微信小程序从前端到后台整和笔记
    OpenCart框架运行流程介绍opencart资料链接
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6090156.html
Copyright © 2011-2022 走看看