首页 技术 正文
技术 2022年11月15日
0 收藏 953 点赞 3,784 浏览 895 个字

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>
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,996
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,510
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,353
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,137
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,770
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,848