闲聊：
今天小颖要实现一个当改变了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="{{item.id}}" ng-repeat="item in selectAList.dataList track by $index">{{item.name}}</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="{{item.id}}" ng-repeat="item in selectBList.dataList track by $index">{{item.name}}</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>