您现在的位置是:首页 > Javascript
当前栏目
[angularjs] angularjs系列笔记(八)事件
2023-02-18 15:50:04 时间
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>
相关文章
- 详解JS中 call 方法的实现
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
- jsonp跨域+ashx(示例)
- 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
- 在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
- 循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
- 使用egg.js开发后端API接口系统
- JavaScript 里三个点 ...,可不是省略号啊···
- ASP.NET Core project.json imports 是什么意思?
- 循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数
- 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
- ASP.NET Core WebApi 返回统一格式参数(Json 中 Null 替换为空字符串)
- tsconfig.json在配置文件中找不到任何输入,怎么办?
- C#开发微信门户及应用(40)--使用微信JSAPI实现微信支付功能
- C#开发微信门户及应用(39)--使用微信JSSDK实现签到的功能
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- ASP.NET Core 返回 Json DateTime 格式
- jQuery.template.js 简单使用
- JavaScript 解决 onblur 与 onclick 冲突
- highlight.js 代码高亮插件