angularjs怎么给div添加点击事件

如题所述

具体回答就是在div上写ng-click="cbClick()"这样的方式来实现.angular框架推崇的是声明式ui,所以基本上回调事件写在html元素上比较符合约定,或者你也可以把事件封装到指令中. 用angular的话,最好不要考虑jquery的思路来做程序,最好的方式就是考虑下angular特有的方式,比如双向数据绑定,控制器,指令来完成这类型的功能,不要去考虑细节怎么实现的,要从抽象的层面去实现,不然angular能做的,jquery也能做,不要把一个angular程序写出jquery
温馨提示:内容为网友见解,仅供参考
第1个回答  2016-07-14
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);
}
第2个回答  2018-08-22
<!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>
第3个回答  2018-08-24

<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;
}


第4个回答  2018-04-12

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);}

本回答被网友采纳
相似回答