angularjs怎么给div添加点击事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs怎么给div添加点击事件相关的知识，希望对你有一定的参考价值。
具体回答就是在div上写ng-click="cbClick()"这样的方式来实现.angular框架推崇的是声明式ui,所以基本上回调事件写在html元素上比较符合约定,或者你也可以把事件封装到指令中. 用angular的话,最好不要考虑jquery的思路来做程序,最好的方式就是考虑下angular特有的方式,比如双向数据绑定,控制器,指令来完成这类型的功能,不要去考虑细节怎么实现的,要从抽象的层面去实现,不然angular能做的,jquery也能做,不要把一个angular程序写出jquery 参考技术A angularjs给div添加点击事件是通过ng-click来实现的。写法：<div ng-repeat="course in vm.Courses" ng-click="OpenCourse(course.Id)">
在$scope范围内定义的函数可以直接引用。
1、完整的html代码：
<body ng-controller="myCtrl">
<div>
<div ng-repeat="course in vm.Courses" ng-click="OpenCourse(course.Id)">
<div>
<div>
<label>course.Name</label>
</div>
</div>
</div>
</div>
</body>
2、增加事件的OpenCourse方法：
$scope.OpenCourse = function(courseId)
$window.alert("Called " + courseId);
参考技术B <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--http://www.51xuediannao.com/html+css/htmlcssjq/css3_media.html-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" charset="utf-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
select
width: 100%;
ul
list-style: none;
padding-left: 3px;
img
width: 100px;
height: 100px;
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<select name="" ng-model="orderkey" >
<option value="">按要求排序</option>
<option value="-m_time">按时间正序</option>
<option value="m_price">按价格正序</option>
</select>
<br />
<select name="" ng-model="serachkey1">
<option value="">按状态查询</option>
<option value="已发货">已发货</option>
<option value="未发货">未发货</option>
</select>
<br />
<input type="text" id="" value="" placeholder="按名称查询" ng-model="serachkey" style="width: 100%;"/>
<div ng-show="isclear" style="width: 100%; height: 200px;text-align: center;line-height: 200px;">数据已经清空！</div>
<table border="0" cellspacing="0" cellpadding="5">
<tr ng-repeat="x in datas|orderBy:orderkey|filter:m_zhuangtai:serachkey1,m_name:serachkey">
<td><input type="checkbox" name="" id="" value="" /></td>
<td><img src="x.picUrl" /></td>
<td>
<ul>
<li>x.m_name+"-"+x.m_zhuangtai</li>
<li>x.m_price|currency:"￥:"</li>
<li>
<input type="button" id="" value="-" ng-click="reduce(x.id)" />
<span>x.m_num</span>
<input type="button" id="" value="+" ng-click="x.m_num=x.m_num+1"/>
</li>
<li>
<span style="color: red;font-weight: bolder;">(x.m_price*x.m_num)|currency:"￥:"</span>
<input type="button" id="" value="删除" />
<input type="button" id="" value="修改" />
</li>
</ul>
</td>
</tr>
</table>
<p>
<input type="button" name="" id="" value="全选/返选" onclick="seleAll()" />
<input type="button" name="" id="" value="批量删除" ng-click="delMore()" />
<input type="button" name="" id="" value="新增记录" ng-click="isAdd=!isAdd"/>
<input type="button" name="" id="" value="清空记录" ng-click="clearRecords()" />
</p>
<span style="color: green;">合计：getTotal()|currency:"￥:"</span>
<span style="color: green;">数量合计：getNumTotal()</span>
<ul style="list-style: none;" ng-show="isAdd">
<li><input type="text" id="" value="" placeholder="请输入名称" ng-model="a_name"/>
<div style="color: red;" ng-show="isname">*名称不能为空</div>
</li>
<li><input type="text" id="" value="" placeholder="请输入价格" ng-model="a_price"/>
<div style="color: red;" ng-show="isprice">*价格大于0</div>
</li>
<li>产地：</li>
<li>
<select ng-model="province" ng-options="a.province for a in addr" ng-change="changePro()"></select>
<select ng-model="city" ng-options="b.city for b in province.citys"></select>
</li>
<li><input type="button" id="" value="保存" ng-click="save()" /></li>
</ul>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope,$http)
//获取数据
$http.get("data.json").then(function(response)
$scope.datas=response.data;
)
$scope.reduce=function(mid)
for (var i = 0; i < $scope.datas.length; i++)
if($scope.datas[i].id==mid)
var n=$scope.datas[i].m_num;
if(n>1)
$scope.datas[i].m_num--;
$scope.clearRecords=function()
$scope.datas=[];
$scope.isclear=true;
)
</script>
</body>
</html> 参考技术C
<div style="margin-top: 30px;" ng-show="add_view">
<input type="text" placeholder="输入的名称不能为空" ng-model="name" />
<span style="color: red;" ng-show="name_tip">*输入的名称不能为空</span>
<br />
<input type="text" placeholder="输入的价格不能小于0" ng-model="price" />
<span style="color: red;" ng-show="price_tip">*输入的价格大于0</span>
<br />
<input type="button" value="保存" ng-click="save()" />
</div>
//添加
$scope.add=function()
$scope.add_view=true;
$scope.save=function()
var name=$scope.name;
if(name==""||name==null||name==undefined)
$scope.name_tip=true;
return;
else
$scope.name_tip=false;
var price=$scope.price;
if(price==""||price==null||price==undefined)
$scope.price_tip=true;
return;
else
$scope.price_tip=false;
var obj=
"m_name":name,
"m_price":price,
"m_time":new Date(),
"m_zhuangtai":"未发货",
"m_address":"河北"
$scope.data.push(obj);
$scope.add_view=false;
参考技术D
angularjs给div添加点击事件是通过ng-click来实现的。
写法：<div ng-repeat="course in vm.Courses" ng-click="OpenCourse(course.Id)">
在$scope范围内定义的函数可以直接引用。
1、完整的html代码：
<body ng-controller="myCtrl">
<div>
<div ng-repeat="course in vm.Courses" ng-click="OpenCourse(course.Id)">
<div>
<div>
<label>course.Name</label>
</div>
</div>
</div>
</div>
</body>
2、增加事件的OpenCourse方法：
$scope.OpenCourse = function(courseId) $window.alert("Called " + courseId);
多个div，js点击事件
<div id="ok1"></div>
<div id="ok2"></div>
<div id="ok3"></div>
<div id="ok4"></div>
多选或单选点击事件，js怎么处理
多选或者单选不应该是input type="radio" 或者 type="checkbox" 这种input标签么，怎么会想到用div呢
用div的话
方法1：在每个div中加个class,如 <div id="ok1" class="hhhhh"></div>
然后引入jquery，定义
$(function()
$('.hhhhh').click(function(
//处理点击业务
))
)
方法2：在每个div中加个function,如 <div id="ok1" onclick="hhhhh(this)"></div>然后js方法：
function hhhhh(thisObj)
//处理点击业务 thisObj为当前this对象
以上是关于angularjs怎么给div添加点击事件的主要内容，如果未能解决你的问题，请参考以下文章