版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/FKCSSS/article/details/50381195
學習了angularjs，開發項目中爲了節省時間，沒有專門學習指令。事後發現項目的下拉可以集成一下，就沒事寫了一個簡單的。
index.html文件：
</pre><pre name="code" class="html"><!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8"/>
<title>angularjs 下拉框</title>
<script src="../angular.js"></script>
<script src="../jquery.js"></script>
<script src="app.js"></script>
<style type="text/css">
ul,li,div{
margin: 0;
padding: 0;
}
.m-select {
position: relative;
}
.u-select {
width: 100px;
border-right: 0;
cursor: pointer;
color: #647486;
position: relative;
cursor: pointer;
height: 35px;
font-size: 15px;
}
#select-country{
position: absolute;
width: 20px;
top: 7px;
left: 5px;
}
#phoneCode{
position: absolute;
top: 7px;
left: 25px;
width: 40px;
height: 20px;
display: inline-block;
text-align: center;
}
#select-sub{
width: 11px;
position: absolute;
top: 13px;
left: 65px;
}
#select-splie{
position: absolute;
top: 8px;
left: 85px;
display: block;
height: 18px;
border-right: 1px solid #bdc3c7;
}
.u-select-ul{
cursor: pointer;
background: #FFF;
overflow: hidden;
width: 85px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
box-shadow:0 0 10px #bdc3c7;
position: absolute;
top: 35px;
padding: 0px;
}
.u-select-li{
list-style-type: none;
height: 23px;
margin-top: 3px;
padding-top: 5px;
padding-bottom: 5px;
}
.u-select-li:hover{
background: #eef3f5;
}
.select-country{
width: 20px;
height: 20px;
margin-left: 5px;
margin-right: 5px;
box-shadow: 0 0 4px rgba(0,0,0,0.1);
}
label{
cursor: pointer;
position: relative;
top: -7px;
}
</style>
</head>
<body>
<select-block/>
</body>
</html>app.js文件：
var app = angular.module('myapp',[]);
app.directive('selectBlock',function (selectService) {
return{
restrict: 'AE',
replace: true,
scope:{},
templateUrl: 'selectblock.html',
link: function(scope, elem, attrs){
scope.isShowCountry = false;
scope.countrys = selectService.resources;
scope.country = scope.countrys[0];
scope.selectCountry = function(index){
scope.country = scope.countrys[index];
scope.isShowCountry = false;
}
}
}
});
app.service('selectService', [function(){
this.resources = {
'0': {
"country": '中國',
"flag": 'img/china.png',
"code": '+86'
},
'1': {
"country": '加拿大',
"flag": 'img/canada.png',
"code": '+1'
},
'2': {
"country": '法國',
"flag": 'img/france.png',
"code": '+33'
},
'3': {
"country": '德國',
"flag": 'img/germany.png',
"code": '+49'
},
'4': {
"country": '香港',
"flag": 'img/hk.png',
"code": '+852'
},
'5': {
"country": '意大利',
"flag": 'img/italy.png',
"code": '+39'
},
'6': {
"country": '日本',
"flag": 'img/japan.png',
"code": '+81'
},
'7': {
"country": '韓國',
"flag": 'img/korea.png',
"code": '+82'
},
'8': {
"country": '英國',
"flag": 'img/UK.png',
"code": '+44'
},
'9': {
"country": '美國',
"flag": 'img/USA.png',
"code": '+1'
},
'10': {
"country": '西班牙',
"flag": 'img/apain.png',
"code": '+34'
}
};
}])
<span style="font-size:10px;"><div class="m-select" ng-mouseleave="isShowCountry=false;">
<div class="u-select" ng-click="isShowCountry = !isShowCountry;">
<img id="select-country" ng-src="{{country.flag}}" />
<label id="phoneCode">{{country.code}}</label>
<img id="select-sub" src="http://image.1yingli.cn/img/new/select-arrow1.png"></img>
<span id="select-splie"></span>
</div>
<ul class="u-select-ul" ng-show="isShowCountry">
<li class="u-select-li" ng-click="selectCountry($index);" ng-repeat="country in countrys">
<img class="select-country" ng-src="{{country.flag}}"></img>
<label>{{country.code}}</label>
</li>
</ul>
</div> </span><span style="font-size:18px;">
</span>這是個簡單的例子。