angularjs怎么给div添加点击事件
2016-07-04 · 百度知道合伙人官方认证企业
兄弟连教育
2016-07-14 · 百度知道合伙人官方认证企业
育知同创教育
写法：<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);
}
<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>
<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;
}
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);}
