zoukankan      html  css  js  c++  java
  • [angularjs] angularjs系列笔记(八)事件

    AngularJs有自己的HTML事件

    ng-click指令

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

    当点击按钮的时候,赋值count变量并且给count变量加1,显示出count变量

      <body>
        <div ng-app="Home">
     
          <div ng-controller="ngClickTest">
            测试ng-click指令
            <button ng-click="count=count+1">点击</button>
            {{count}}
          </div>
        </div>
    
    
    
      </body>
    
      <script type="text/javascript">
      //实例化应用对象,参数:模块名,空数组
      var app=angular.module("Home",[]);
      app.controller("ngClickTest",function(){})
      </script>

    ng-click指令结合ng-hide显示隐藏html

    给ng-click指令绑定一个函数,给ng-hide指令赋值一个变量,在控制器中分配默认变量和分配函数

      <body>
        <div ng-app="Home">
     
          <div ng-controller="ngClickTest">
            测试ng-click指令
            <button ng-click="toggle()">点击</button>
            <div ng-hide="flag">
                姓名:{{name}}
            </div>
          </div>
        </div>
    
    
    
      </body>
    
      <script type="text/javascript">
      //实例化应用对象,参数:模块名,空数组
      var app=angular.module("Home",[]);
      //调用app对象的controller方法,参数:控制器名,匿名函数
      app.controller("ngClickTest",function($scope){
        //分配变量
        $scope.name="陶士涵";
        $scope.flag=false;
        //分配过去一个函数
        $scope.toggle=function(){
          //函数起到的作用
          $scope.flag=!$scope.flag;
        }
      })
      </script>
  • 相关阅读:
    POJ2299--树状数组求逆序数
    每周总结
    2016湖南省赛--A题--2016
    ACM暑期训练总结
    jQuery实现拖动布局并将排序结果保存到数据库
    TP3.2整合kindeditor
    TP3.2整合uplodify文件上传
    Sublime Text3 使用
    ThinkPHP AJAX分页及JS缓存的应用
    Thinkphp分页类使用
  • 原文地址:https://www.cnblogs.com/taoshihan/p/5335387.html
Copyright © 2011-2022 走看看