您现在的位置是:首页 > Javascript
当前栏目
[angularjs] angularjs系列笔记(八)事件
2023-02-18 15:47:25 时间
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>
相关文章
- 使用Helm部署Wikijs
- 我为什么选择Wiki.js记笔记?
- 如何通过 kubectl 进入 node shell
- JavaScript之无题之让人烦躁的模块化
- Javascript之异步循环打印这道小题
- Javascript之我也来手写一下Promise
- 《JavaScript 模式》读书笔记(8)— DOM和浏览器模式2
- 《JavaScript 模式》读书笔记(8)— DOM和浏览器模式1
- 《JavaScript 模式》读书笔记(7)— 设计模式3
- 《JavaScript 模式》读书笔记(7)— 设计模式2
- 《JavaScript 模式》读书笔记(7)— 设计模式1
- Javascript之其实我觉得原型链没有难的那么夸张!
- 《JavaScript 模式》读书笔记(6)— 代码复用模式3
- 《JavaScript 模式》读书笔记(6)— 代码复用模式2
- 《JavaScript 模式》读书笔记(6)— 代码复用模式1
- 《JavaScript 模式》读书笔记(5)— 对象创建模式4
- 《JavaScript 模式》读书笔记(5)— 对象创建模式3
- 《JavaScript 模式》读书笔记(5)— 对象创建模式2
- 《JavaScript 模式》读书笔记(5)— 对象创建模式1
- 《JavaScript 模式》读书笔记(4)— 函数5