ng-change事件中如何获取$event和如何在子元素事件中阻止调用父级元素事件(阻止事件冒泡)

内容预览:
  • 闲聊: 今天小颖要实现一个当改变了select内容后弹出一个弹框,并且点击...~
  • 哈哈哈哈哈哈 还和往常一样我们先来看看页面效果: 解释: 第一个弹框因...~
  • 不知道大家发现没其实两个都是在select的值发现变化后,弹框才出来的,...~

闲聊:

今天小颖要实现一个当改变了select内容后弹出一个弹框,并且点击select父元素使得弹框消失,这就得用到阻止事件的冒泡了:$event.stopPropagation(),然而小颖发现,在ng-change事件中是获取不到$event的,所以就百度了下嘻嘻,最后使用 ng-click +$watch 搞定啦,下面就来看看小颖是怎么解决问题的呢。哈哈哈哈哈哈

还和往常一样我们先来看看页面效果:

解释:

第一个弹框因为是给select绑定的 ng-change ,小颖干脆就没做弹框消失处理,嘻嘻,

第二个就是为了是实现当select内容改变弹框出现,点击其父级弹框消失的处理。

不知道大家发现没其实两个都是在select的值发现变化后,弹框才出来的,虽然第

二个select绑定的是 ng-click 而不是  ng-change 。

html+css 代码:

<!DOCTYPE html>

<html ng-app="test">

<head>
<title></title>
<style type="text/css">
body
{
position
: relative;
}

.ceshi
{
width
: 400px;
margin
: 0 auto;
}

.select-template
{
padding
: 30px 10px;
}

.select-btn
{
height
: 34px;
padding
: 6px;
color
: #666;
border-color
: #e4e4e4;
}

div#linkBox1,
div#linkBox2
{
font-family
: arial;
font-size
: 12px;
text-align
: left;
border
: 1px solid #AAA;
background
: #FFF none repeat scroll 0% 0%;
z-index
: 9999;
visibility
: hidden;
position
: absolute;
padding
: 0px;
border-radius
: 3px;
white-space
: nowrap;
}

.intcaselink
{
cursor
: pointer;
padding
: 3px 8px 3px 8px;
margin
: 5px;
background
: #EEE none repeat scroll 0% 0%;
border
: 1px solid #AAA;
border-radius
: 3px;
}
</style>
</head>

<body ng-controller="main">
<div class="ceshi">
<div class="select-template">
<select class="select-btn" ng-model="selectAList.value" ng-change="selectChangeFun1()">
<option value="-1">请选择</option>
<option value="{}" ng-repeat="item in selectAList.dataList track by $index">{}</option>
</select>
</div>
<div style="background-color: pink;" class="select-template" ng-click="hiddenLinkBox2()">
<select class="select-btn" ng-model="selectBList.value" ng-click="selectClickFun1($event)">
<option value="-1">请选择</option>
<option value="{}" ng-repeat="item in selectBList.dataList track by $index">{}</option>
</select>
</div>
<div ng-show="showLinkBox1" class="intcases" id="linkBox1" style=" top: 35px;left: 600px;visibility: inherit; z-index: 1003;">
<div class="intcaselink">APP推送(链接)</div>
<div class="intcaselink">APP推送(专题)</div>
<div class="intcaselink">APP推送(活动)</div>
<div class="intcaselink">APP推送(商品)</div>
</div>
<div ng-show="showLinkBox2" class="intcases" id="linkBox2" style=" top: 135px;left: 600px;visibility: inherit; z-index: 1003;">
<div class="intcaselink">APP推送(链接)</div>
<div class="intcaselink">APP推送(专题)</div>
<div class="intcaselink">APP推送(活动)</div>
<div class="intcaselink">APP推送(商品)</div>
</div>
</div>
</body>

</html>

js代码:

    <script src="js/angular.js" charset="utf-8"></script>

<script type="text/javascript">
let mod
= angular.module('test', []);
mod.controller(
'main', function($scope) {
$scope.selectAList
= {
value:
'-1',
dataList: [{
id:
'1',
name:
'aaa'
}, {
id:
'2',
name:
'bbb'
}, {
id:
'3',
name:
'ccc'
}]
};
$scope.selectBList
= {
value:
'-1',
dataList: [{
id:
'1',
name:
'豆豆'
}, {
id:
'2',
name:
'仔仔'
}, {
id:
'3',
name:
'琪琪'
}]
};
$scope.showLinkBox1
= false;
$scope.showLinkBox2
= false;
$scope.selectChangeFun1
= function() {
$scope.showLinkBox1
= true;
}
// 隐藏LinkBox2
$scope.hiddenLinkBox2 = function() {
$scope.showLinkBox2
= false;
}
$scope.selectClickFun1
= function($event) {
$event.stopPropagation();
}
$scope.$watch(
"selectBList.value", function(newVal, old) {
if (newVal == old) {
return;
}
$scope.showLinkBox2
= true; //app推送弹框
})
});
</script>

 

以上就是:ng-change事件中如何获取$event和如何在子元素事件中阻止调用父级元素事件(阻止事件冒泡) 的全部内容。

本站部分内容来源于互联网和用户投稿,如有侵权请联系我们删除,谢谢。
Email:[email protected]


0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论